node做爲前臺的項目如何打包靜態js和css並生成版本號，loader插件的使用

時間 2019-11-08

標籤 node 做爲前臺項目如何打包靜態 css 生成本號 loader 插件使用欄目網站開發简体版

原文原文鏈接

一.使用場景：

1.node建立的前臺項目須要輸入地址展現頁面css

2.有設置緩存或者cdn的須要在靜態文件更改時能使用新的而不是緩存的，須要版本號這裏html

3.可能須要壓縮靜態文件的vue

二.一些參考地址，須要安裝的插件

1.loader ( https://github.com/JacksonTian/loader )（配合編譯使用的）node

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

3.完整的筆記地址，是x-mind的須要先安裝若是要看的話（https://github.com/13476075014/node-vue/blob/master/mynodeproject/11.oldcode/各類筆記/x-mind%20筆記/node/loader.xmind）github

須要先全局安裝: npm install loader-builder -gexpress

而後本地項目安裝loader: npm install loader npm

三.使用步驟

1..在package.json裏面加上一個打包的指令 loader,後面運行項目須要先運行這個指令打包後再啓動項目json

具體內容以下：api

//在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.到這裏就能夠直接啓動項目了，能夠設置開發環境和生產環境

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。