NPM腳本支持多環境配置打包

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方法配置全局的變量（瀏覽器端纔可訪問），能夠解決配置多環境代碼下打包兼容。
複製代碼