create-react-app打包环境配置

时间：2025-01-22 15:32:44

create-react-app 打包环境以及打包输出文件夹名设置

  • create-react-app 不同环境打包及打包到对应的文件夹内
  • 设置不同环境打包不同文件夹
设置不同环境的打包，这里区分为三种环境，线上的测试，演示，正式环境

1。安装 cross-env。兼容跨平台(window, mac)设置的环境变量的有效性。

npm install npm install --save-dev cross-env

2.在中配置打包命令，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/",   // 生成的项目文件本地运行的命令，这里加上测试打包环境
    "build": "node scripts/",
    "test": "node scripts/",
    "dev": "cross-env REACT_APP_SECRET_ENV='development' node scripts/",   // development 测试环境
    "demo": "cross-env REACT_APP_SECRET_ENV='demoing' node scripts/",     // demoing 演示环境
    "prod": "cross-env REACT_APP_SECRET_ENV='production' node scripts/"   // production 正式环境
  },

3.打开config文件夹下的 ,大概在74，75行吧,加上设置的环境变量

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={.PUBLIC_URL + '/img/'} />.
        // 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,
      }
    );

4.在src文件夹下新建 utils 文件夹。里面新建 文件。写上不同环境下的需要的域名：


// init 
var api_url = 'http://192.168.1.0'  //替换成你的域名，初始化，一般写测试的就行

// 获取设置的环境变量 .REACT_APP_SECRET_ENV
var env = process.env.REACT_APP_SECRET_ENV;

switch(env) {
    case 'development': 
        api_url = 'http://192.168.1.0';        
        break;
    case 'demoing':
        api_url =  '演示服域名';
        break;
    case 'production':        
        api_url = '正式服域名'
        break;
    default:
        api_url = 'http://192.168.1.0'
}

export default  {
    apiUrl: api_url,
}

5. 引入配置好的接口文件 ,现在各个环境需要的接口都配置好了。执行相对应的命令就可以打包出对应环境的文件。然后就可以随心所使用欲啦～

import API from './utils/initEnv';
console.log(API.apiUrl);
设置不同环境打包不同文件夹

1.打开config文件夹下的文件。在文件最后：

// config after eject: we're in ./config/
module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),    //  就是这个了，把 `build` 替换成你设置的文件名，根据`.REACT_APP_SECRET_ENV`设置。
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp(''),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp(''),
  appJsConfig: resolveApp(''),
  yarnLockFile: resolveApp(''),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/'),
  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

打开控制台，就可以看到打印值：正式服域名;

相关文章