官网文档地址:​​https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/​

在实际开发中,前端er会面对多个环境的接口:开发环境、测试环境、生产环境...这些环境最终要的区别是API的URL不同,所以代码中不能将URL写死,而是要根据不同的环境配置。

注:create-react-app或者 umi这样的脚手架初始化的项目,会将webpack的配置黑盒化了,如何在不执行 eject 操作的前提下优雅地配置多个项目环境呢?(最好不要一遇到问题就一键执行 eject 操作, eject 操作是不可逆的,执行之后会把所有细节都暴露在我们面前,让项目目录变得很庞大)

​create-react-app​​ 支持多环境,接下来我们一起看下如何设置。

 

1、react自带的两个环境变量:

1.1)NODE_ENV

create-react-app 创建的项目有内置的环境变量NODE_ENV,该变量是自动赋值的,不可更改。在js代码中可通过 process.env.NODE_ENV 读取它。NODE_ENV 默认有三个可能的值,分别是:

  • development:开发环境,运行 npm start, NODE_ENV 的值为 development;
  • test:测试环境,运行npm run test 则是 test;
  • production:生产环境,运行npm run build 则对应 prodution.

比如开发环境的 API 的 URL 为 urlDev,生产环境的 URL 为 urlProd,就可通过环境变量,判断当前环境,使用相应的 URL:

let env = process.env.NODE_ENV

let baseUrl = ''

if (env === 'development') {
baseUrl = urlDev
} else if (env === 'production') {
baseUrl = urlProd
}

get(baseUrl) // 伪代码,表示请求动作

简单的系统,我们通过上面代码已经能够完成不同环境的设置了。

1.2)PUBLIC_URL:

这个变量可以用于引用模块系统之外的资源路径前缀,用create-react-app脚手架创建的react项目,在public目录下,有index.html、favicon.ico等文件,index.html中使用了该变量引用图片:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

默认改变量的值是空(“”),上面index.html中,href=“/favicon.ico”表示站点根路径,可以设置该变量为cdn,加速静态资源访问效率。

1)如何使用改变量:

  • html中通过%PUBLIC_URL% 获取变量值
  • js中通过process.env.PUBLIC_URL 获取变量值

2)设置该变量:

在.env文件中设置该变量的值为一个合法的url路径,打包后,在使用该变量的文件中就会被替换成对应的值。(.env文件相关内容见下文)

更多的自建变量:​​https://create-react-app.dev/docs/advanced-configuration/​

 

2、多环境设置:

项目的根目录添加一系列名为 .env的文件,里面写上变量名和值,打包后,可以在js代码中通过process.env.REACT_APP_XXX读取到对应文件中的变量值。

注:文件中的变量必须以REACT_APP_ 开头,其他的react不识别。

说明:此功能适用于 react-scripts@0.5.0 及更高版本,可以通过以下命令更新:

npm install --save --save-exact react-scripts@1.1.4

2.1)默认可以使用哪些 .env 文件?

默认,可以在项目根目录下建立如下文件:

  • .env:默认。
  • .env.local:本地覆盖。除 test 之外的所有环境都加载此文件。
  • .env.development, .env.test, .env.production:设置特定环境。
  • .env.development.local, .env.test.local, .env.production.local:设置特定环境的本地覆盖。

左侧的文件比右侧的文件具有更高的优先级:

  • npm start: .env.development.local, .env.development, .env.local, .env
  • npm run build: .env.production.local, .env.production, .env.local, .env
  • npm test: .env.test.local, .env.test, .env (注意没有 .env.local )

注:实际测试发现添加完.env文件后,需要重新执行npm start后,代码中获取变量才能生效。

看个示例:

1)在项目根目录建立两个文件:

  • .env.development文件,内容:REACT_APP_TEST=development
  • .env.production文件,内容:REACT_APP_TEST=production

2)在js中通过如下代码访问变量:

 

function App() {
return (
<div className="App">
{process.env.REACT_APP_TEST}<br/>
</div>
);
}

export default App;

3)访问变量值:

  • 执行npm start后,访问页面,得到的变量值为:development
  • 执行npm build后,再执行serve -s build,访问页面,得到的变量值为:production

2.2)dotenv管理环境变量:

上面知道,默认通过create-react-app创建的react项目只能支持上面几种.evn文件,并且通过npm run build只能指定.env.production和默认.env文件中的环境变量,假设系统还有个stage环境,该如何指定呢?官方推荐使用dotenv来做环境变量的管理。dotenv的github地址:​​https://github.com/motdotla/dotenv​

看一个例子:

1)在项目根目录建立三个文件:

  • .env.development文件,内容:REACT_APP_TEST=development
  • .env.stage文件,内容:REACT_APP_TEST=stage
  • .env.production文件,内容:REACT_APP_TEST=production

2)在js中通过如下代码访问变量:

同上

3)修改 package.json 中的 scripts来指定环境:

 

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:stage": "dotenv -e .env.stage react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

4)访问变量值:

# npm run build:stage

在使用前需要安装dotenv-cli(​​https://github.com/entropitor/dotenv-cli​​),否则会报如下错误:

# npm run build:stage

> test@0.1.0 build:stage /tmp/test
> dotenv -e .env.development react-scripts build

sh: dotenv: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! test@0.1.0 build:stage: `dotenv -e .env.development react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the test@0.1.0 build:stage script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-08-30T16_22_57_811Z-debug.log

安装dotenv-cli:

# npm -g install dotenv-cli
[..................] / rollbackFailedOptional: verb npm-session dfed37ae051d8c52
[..................] \ fetchMetadata: sill resolveWithNewModule dotenv-cli@3.2.0 checking installable status
[..................] \ fetchMetadata: sill resolveWithNewModule dotenv-cli@3.2.0 checking installable status
/usr/local/node-v12.9.0-linux-x64/bin/dotenv -> /usr/local/node-v12.9.0-linux-x64/lib/node_modules/dotenv-cli/cli.js

然后再次执行:npm run build:stage,之后启动serve:serve -s build

访问页面,得到变量值为:test

 

 

参考:

​https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/​