NPM脚本支持多环境配置打包

2,310 阅读1分钟

1.使用 cross-env 插件

> cross-env 运行跨平台设置, 如:Windows和POSIX命令使用环境变量是有区别。

2.脚本命令编写

// package.json
"script": {
    <!--设置ENV_DEPLOY和ENV_ENVIRONMENT两个环境变量,只能在node环境通过process.env访问,浏览器访问不到-->
    "sit": "cross-env ENV_DEPLOY=true ENV_ENVIRONMENT=sit node node build/build.js",
    "pro": "cross-env ENV_DEPLOY=true ENV_ENVIRONMENT=pro node node build/build.js",
}

3.使用weback.DefinePlugin()方法

> 用于创建编译时 “配置的全局常量”  以方便进行 环境转换
```js
    new webpack.DefinePlugin({
      'process.env': config.dev.env // config文件下的dev.env.js和prod.env.js下配置
    }),
    ```
    ```js
    //prod.env.js
    module.exports = {
      NODE_ENV: '"production"',
      /** 发布部署模式 */
      ENV_TEST: "'TEST-STRING'"
      ENV_DEPLOY: process.env.ENV_DEPLOY,
      ENV_TYPE: JSON.stringify(process.env.ENV_TYPE),// 字符串要用json.string或者"''"
    };

```

4.使用

```js
//main.js
const env_type = process.env.ENV_TYPE 

console.log(env_type)
```

总结

> 在node环境通过NPM脚本配置环境变量,然后通过,weback的DefinePlugin方法配置全局的变量(浏览器端才可访问),可以解决配置多环境代码下打包兼容。