-
webpack的執行環境是node.js - 在
node.js執行環境中,在所有模塊里都可以訪問到一個全局進程變量process - 在
process全局變量身上都一個對象叫env==>process.env - 由于
JavaScript是非常動態的語言,我們可以隨意在任意對象上任意的添加屬性. 所以,很多前端腳手架配置文件里的process.env.NODE_ENV就是在node.js執行環境下的全局對象process.env上添加了一個很簡單的字符串(development production). -
cross-env是一個第三方庫,可以不在.js文件中,以命令的方式給process.env(特定對象上&配置文件之外),動態的添加各種屬性.在package.json中的scripts腳本配置 -
cress-env是跨平臺的.
// 在 package.json 中
{
"scripts:" : {
"setFccc": "cross-env fccc=123"
"setHaha" : "cross-env haha=zhnas"
}
}
// 上述兩句配置等價于在 js 模塊中
process.env.fccc = '123'
process.env.haha = 'zhnas'
很多前端打包工具的的條件編譯都是利用 process.env.xxxx 來進行的.
- 知道了
process.env是全局的,可以在任意的打包的配置js文件中訪問. - 也知道了可以利用
cross-env在 配置js文件以外修改process.env.xx的值. - 那我們只需要在配置的
js文件中,在配置 js 文件中通過判斷process.env.xxx的值,來進行指定的條件編譯即可.
cress-env.png
一個簡單的 DEMO.
通過
process.env.locale的值,來動態的指定index.html的title屬性值
// package.json 安裝依賴
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0.3",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.10.3"
}
// package.json scripts 腳本配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"en":"cross-env locale=en webpack --config webpack.config.js",
"zh":"cross-env locale=zh webpack --config webpack.config.js"
},
// webpack.config.js 配置代碼
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 根據指定的 process.env.locale 來動態的設定 index.html 的 title 模板值.
const getIndexTitleWithLocale = () => {
switch (process.env.locale) {
case "en":
return "this is english site!"
case "zh":
return "這是中文網站!"
default:
return "你并未設置 process.env.locale 屬性"
}
}
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
plugins: [
new HtmlWebpackPlugin({
// 動態指定模板 title,不能使用 template 屬性
// template: path.resolve(__dirname),
title: getIndexTitleWithLocale()
}),
new CleanWebpackPlugin()
]
}
效果:
cross-env-demo.gif
