区分测试和正式环境

改变运行脚本的环境变量

在执行的命令中设置变量,区分测试和正式环境

主要依靠node的process.env

process 是node的全局对象

而process.env提供执行环境的环境变量

//改变命令的环境变量
//之前先 npm install cross-env
//tips 因为mac和windows设置命令环境变量的命令不一致, 所以用cross-env来做兼容
cross-env NODE_ENV=production webpack

而在webpack中,就可以通过process.env.NODE_ENV获取变量

正式和测试环境区分压缩

例如我们在测试环境下不压缩

而上线的时候压缩

正规的做法有3个webpack配置文件

分别为

webpack.config.js
webpack.dev.js
webpack.production.js

在webpack.config.js区分process.env.NODE_ENV来决定读取webpack.dev还是webpack.production

而我比较懒,因为这个需求比较简单

我就在webpack.config定义一个公共的config对象

而对正式环境进行特殊处理

if (process.env.NODE_ENV === 'production') {
    //config.entry.index.shift()
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    )
}

现在我们输入

export NODE_ENV=production&&webpack就会压缩文件

export NODE_ENV=dev&&webpack则不会压缩文件

配置到package.json

一般的测试和正式的命令都会比较长

我们可以把常用的命令放在package.json里的scripts属性里

{
  "scripts": {
    "dev": "export NODE_ENV=dev&&webpack  --progress --colors",
    "production": "export NODE_ENV=production&&webpack  --progress --colors",
  },

这样我们在项目根目录输入

npm run dev //测试 npm run production //正式

在浏览器中区分测试和正式环境

前面所说的都是在node的执环境下,但是到了浏览器环境如何区分是测试打的包还是正式环境下的包

如果是在webpack下,可以使用webpack.DefinePlugin

eg:

 plugins: [
    new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
          }
        }),

这样 在我们实际的浏览器代码中,就可以process.env.NODE_ENV用来判断是否正式和测试环境了

注意的是,着了为什么要用JSON.stringify

因为其实在webpack打包出来的文件,不再包含process.env.NODE_ENV这样的字符串

而是直接替换成对应的值,例如上面的eg就会在代码中把process.env.NODE_ENV改为'production'(如果是正式环境)

如果不用JSON.stringify,则直接输出production,在浏览器会认为这个一个变量,而我们定义没有这个变量,就会报错

参考链接

1. process: http://javascript.ruanyifeng.com/nodejs/process.html
2. defineplugin的用法: https://cnodejs.org/topic/5785b3ef3b501f7054982f69
3. 一个台湾选手的译文,入门还ok: https://rhadow.github.io/2015/03/23/webpackIntro/