react----cross-env配置多環境變量

1.當項目結構爲dva架構的時候
（1）安裝cross-env

npm i -D cross-env

（2）配置package.json
示例;配置測試環境與生產環境下的本地項目

{
  "private": true,
  "scripts": {
    "start": "cross-env CMDEFINE_ENV=dev roadhog server",
    "startp": "cross-env CMDEFINE_ENV=prod roadhog server",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "cross-env": "^5.2.1",
    "dva": "^2.4.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-plugin-dva-hmr": "^0.3.2",
    "eslint": "^4.14.0",
    "eslint-config-umi": "^0.1.1",
    "eslint-plugin-flowtype": "^2.34.1",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
    "husky": "^0.12.0",
    "redbox-react": "^1.4.3",
    "roadhog": "^2.5.0-beta.4"
  }
}

（3）新建webpackrc.js,

export default{
    entry:'src/index.js',
    define:{
        'process.env':{
            CMDEFINE_ENV:process.env.CMDEFINE_ENV,
        }
    }
}

因爲修改了項目的配置文件，需要重新啓動項目纔可以看到最新的配置
在index.js中console.log(process.env)就可以拿到當前最新的環境配置，全局可用

2.當項目結構是react腳手架架構的時候(此時項目配置處於已經彈出)
（1）安裝

npm i -D corss-env

(2)配置package.json

"scripts": {
    "start": "cross-env CMLINT_ENV=dev node scripts/start.js",
    "startProd": "cross-env CMLINT_ENV=prod scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

（3）找到webpack配置文件(env.js)
在函數getClientEnvironment添加當前通過cross-env配置的環境