create react app 区分不同的环境

Jimmy_is_jimmy

发布于 2023-05-10 01:03:56

1K00

代码可运行

文章被收录于专栏：call_me_Rcall_me_R

运行总次数：0

代码可运行

前言

最近在开发项目的过程中，遇到了多个环境：本地开发环境，测试环境，qal 环境和线上环境区分的问题，每个环境对应的变量有所差别，比如对接公众号时候，appId 就跟不同的环境挂钩。但是使用 Create React App 搭建的项目，npm run start 指向本地环境 development，npm run build 指向线上环境 production，那么还有其他两个环境应该怎么做呢？

首先，想到了 NODE_ENV - 其通常被用来区分开发与生产环境，加载不同的配置。

使用 NODE_ENV

为了不引入额外的安装包和文件，这里，我们直接在 package.json 中进行修改，如下：

"scripts": {
  "start": "NODE_ENV=development react-scripts start",
  "build-test": "NODE_ENV=test react-scripts build",
  "build-qal": "NODE_ENV=qal react-scripts build",
  "build-prd": "NODE_ENV=prd react-scripts build"
}

项目基于 apple m1 开发，未考虑到 window 系统

当我们配置好命令行后，在项目入口文件 src/index.js 中进行区分环境调用：

// src/index.js
// 环境变量
const _env = process.env?.NODE_ENV;

console.log(_env);

// 如果在控制台上不方便查看，你可以在页面中查看
// 代码忽略 ...
<div>当前环境 { _env }</div>
// 代码忽略 ...

然而build-test, build-qal, build-prd环境打印出来的 _env 并非是 test, qal, prd。这就很奇怪？网上说配合第三方插件可以解决这个问题，感兴趣的读者可以自己尝试～比如 react-app-rewired。

使用 REACT_APP_ENV

我们直接新开一个变量，但是不能随意开，比如 JIMMY_ENV 就不会被承认，而 REACT_APP_ENV 就会被承认接受，Ant Design Pro 的脚手架中就有这样的一个环境变量 REACT_APP_ENV。读者可以尝试以 REACT_ 为前缀进行命名新变量～

如上，我们还是在 package.json 文件中更改：

"scripts": {
  "start": "REACT_APP_ENV=development react-scripts start",
  "build-test": "REACT_APP_ENV=test react-scripts build",
  "build-qal": "REACT_APP_ENV=qal react-scripts build",
  "build-prd": "REACT_APP_ENV=prd react-scripts build"
}

在 src/index.js 入口文件中读取文件：

// src/index.js
// 环境变量
const _env = process.env?.REACT_APP_ENV;

// 假设是获取接口服务
export const getPrefixPathUrl = () => {
  let _url = '';
  switch(_env) {
    case 'development': _url = 'development_url'; break;
    case 'test': _url = 'test_url'; break;
    case 'qal': _url = 'qal_url'; break;
    case 'prd': _url = 'prd_url': break;
    default: break;
  }
  return _url;
}

这个时候，我们运行 package.json 中不同的命令行，调用方法 getPrefixPathUrl 就会根据不同的环境获取该环境的接口服务路径。

小坑提示：REACT_APP_ENV=development react-scripts start 不可中间插入其他的脚本。项目中有其他的脚本，如下：

"scripts": {
  "set-config": "node ./config/default.js",
}

在构建或者本地开发，需要前置命令配置，应该如下编写：

"scripts": {
  "start": "npm run set-config &amp;&amp; REACT_APP_ENV=development react-scripts start",
  "set-config": "node ./config/default.js",
}

而不是这样：

"scripts": {
  "start": "REACT_APP_ENV=development &amp;&amp; npm run set-config &amp;&amp; react-scripts start",
  "set-config": "node ./config/default.js",
}