react环境变量设置

使用的是[email protected]版本
首先安装 npm install create-react-app -g
然后创建文件 create-react-app  react-test
进入文件
cd react-test
运行npm run eject让文件吧webpack相关配置暴露出来，之后删除node-modules (把不需要的包去掉)，重新安装一次npm install
跨环境变量使用cross-env  安装(npm install cross-env --save-dev)
package.json配置

"scripts": {

"dev:test": "cross-env REACT_APP_SECRET_API='dev_test' node scripts/start.js",

"dev:build": "cross-env REACT_APP_SECRET_API='dev_build' node scripts/start.js",

"build:test": "cross-env REACT_APP_SECRET_API='build_test' node scripts/build.js",

"build": "cross-env REACT_APP_SECRET_API='production' node scripts/build.js",

"test": "node scripts/test.js"

},

找到config文件里的env.js,找到这个函数getClientEnvironment

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        REACT_APP_SECRET_API:process.env.REACT_APP_SECRET_API,//加入自己的环境变量
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
      }
    );

创建你自己不用环境变量不同域名

 在入口index.js里面引入你自己定的文件名称  

import './utils/initEnv';
然后就可以使用全部变量global了