node作为前台的项目如何打包静态js和css并生成版本号，loader插件的使用

一.使用场景：

1.node创建的前台项目需要输入地址展示页面

2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的，需要版本号这里

3.可能需要压缩静态文件的

二.一些参考地址，需要安装的插件

1.loader ( https://github.com/JacksonTian/loader )（配合编译使用的）

2.loader-builder( https://github.com/JacksonTian/loader-builder )( 打包的）

3.完整的笔记地址，是x-mind的需要先安装如果要看的话（https://github.com/13476075014/node-vue/blob/master/mynodeproject/11.oldcode/各种笔记/x-mind%20笔记/node/loader.xmind）

需要先全局安装: npm install loader-builder -g

然后本地项目安装loader: npm install loader

三.使用步骤

1..在package.json里面加上一个打包的指令 loader,后面运行项目需要先运行这个指令打包后再启动项目

具体内容如下：

//在scripts下面加上loader的指令

 .......

"scripts": {

    "start": "set NODE_ENV=production && nodemon --inspect main.js",

    "dev": "set NODE_ENV=development && nodemon --inspect main.js",

    "makes": "mingw32-make",

    "loader":"loader ./static/views/mobile ./"  //这个指令，用loader-builder来打包我的mobile下面的view的ejs模板的文件 打包后在根目录生成一个assets.json的指向文件和和生成对应的js和css压缩打包的文件在指定的目录下

  },

....

2.在启动js里面加上loader和assetsMap的引用的挂在在全局变量上，我的是main,js上

具体代码如下：

// main.js

......

const Loader = require('loader') ；

.....

app.locals.Loader = Loader  // 插件loader

app.locals.assetsMap = require('./assets.json') //运行指令后的指向文件

3.根据开发环境和生产环境来区分是否需要展示原静态文件还是压缩后的文件，生产环境展示压缩的

在main.js里面把参数挂在全局，后面页面使用loader的时候根据这个值是否是true来决定是否使用压缩文件，具体代码如下

//main.js

let mydev = process.env.NODE_ENV.trim()

app.locals.myDebug = (mydev && mydev=='production') ? true : false //在loader中根据环境来决定是否要用压缩的静态文件

4.在某个引用了js和css的ejs页面使用loader

具体代码如下：

// index.ejs

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

   .......

// css的引用 myDebug是挂在node的全局渲染变量，这里决定是否使用压缩后的文件，cdn的配置见loader的github上的介绍

<%- Loader("/static/public/mobile/min/index.min.css") 
.css("/static/public/mobile/css/orderDetails.css") 
.css("/static/public/mobile/css/index.css") 
.done(assetsMap，'',myDebug) %>



.......

//js的引用

<%- Loader("/static/public/mobile/min/apiUrlConfig.min.js")

    .js("/static/public/mobile/js/apiUrlConfig.js")

    .done(assetsMap，'',myDebug) %>

......

5.因为打包后的地址设置的static....这里要把这个地址设置成可访问的静态文件

在main.js中根据自己设置的打包后的地址来配置，具体代码如下（我的是用的/static/public/mobile/min/。。。这个地址，所以这里设置static的时候路由是这个文件夹）

app.use('/static', express.static(path.join(__dirname+'/static')));

6.执行命令打包和启动：

npm run loader

（会生成assets.json里面的内容，和生成对应的js和css在指定的目录下）

7.到这里就可以直接启动项目了，可以设置开发环境和生产环境