# webpack学习笔记之十三 - cross-env 使用

• 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

码云地址