create-react-app打包環境配置

設置不同環境的打包，這里區分為三種環境，線上的測試，演示，正式環境
1。安裝 cross-env。兼容跨平台(window, mac)設置的環境變量的有效性。

npm install npm install --save-dev cross-env
　　npm install npm install --save-dev cross-env
2.在package.json中配置打包命令，create-react-app文檔規定自定義環境變量必須以REACT_APP_開頭，並且可以在全局使用（包括業務邏輯）。
打包命令分別為npm run dev, npm run demo, npm run prod;

"scripts": {
    "start": "cross-env REACT_APP_SECRET_ENV='development' node scripts/start.js",   // 生成的項目文件本地運行的命令，這里加上測試打包環境
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "dev": "cross-env REACT_APP_SECRET_ENV='development' node scripts/build.js",   // development 測試環境
    "demo": "cross-env REACT_APP_SECRET_ENV='demoing' node scripts/build.js",     // demoing 演示環境
    "prod": "cross-env REACT_APP_SECRET_ENV='production' node scripts/build.js"   // production 正式環境
  },

4.在src文件夾下新建 utils 文件夾。里面新建 initEnv.js文件。寫上不同環境下的需要的域名：

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_ENV: process.env.REACT_APP_SECRET_ENV,   // 新加的環境變量------------------為了看起來明顯點^_^
        // 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,
        // We support configuring the sockjs pathname during development.
        // These settings let a developer run multiple simultaneous projects.
        // They are used as the connection `hostname`, `pathname` and `port`
        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
        // and `sockPort` options in webpack-dev-server.
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
      }
    );

 

5.index.js 引入配置好的接口文件 initEnv.js,現在各個環境需要的接口都配置好了。執行相對應的命令就可以打包出對應環境的文件。然后就可以隨心所使用欲啦～

　　import API from './utils/initEnv';

　　console.log(API.apiUrl);
設置不同環境打包不同文件夾
1.打開config文件夾下的path.js文件。在文件最后：

// config after eject: we're in ./config/
module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),    //  就是這個了，把 `build` 替換成你設置的文件名，根據`process.env.REACT_APP_SECRET_ENV`設置。
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrlOrPath,
};

module.exports.moduleFileExtensions = moduleFileExtensions;

 

設置完成，可以打包看看。

華麗麗的分割線～～～

　　tip: 想看打印出來的對應的域名是不是對的。可以安裝本地服務。分別打包對應的命令並啟動服務在控制台查看
1.先打包文件，這里我們打包正式環境npm run prod,打包完成之后項目根目錄會有一個build的文件夾。
2.安裝serve:

npm install -g serve
安裝完成后，啟動serve

serve -s build-pro
打開控制台，就可以看到打印值：正式服域名;

————————————————
版權聲明：本文為CSDN博主「yagmdream」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sinat_40257787/article/details/104824677