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配置的环境