create-react-app 配置环境变量记录

首先这篇文章目的是记录一些create-react-app的一些常用以及好用的操作，网络上的教程动不动就eject，本来一很容易的一件事非要整的特复杂且容易出错

如何让你的app区分环境变量

一、使用dotenv

安装方法yarn add -D dotenv-cli or npm install -save-dev dotenv-cli

二、修改package.json下的scripts节点

create-react-app原有的配置是这个样子的

...
"scripts": {
    "start": "react-scripts start",
    "build: "react-scripts build",
    "test": "react-scripts test",
    "eject": "echo 'react-scripts eject'"
},
...

我们需要在项目下的env目录下创建两个或者多个env文件，我这里创建了三个（dev.env 测试环境｜ prod.env 生产环境｜ test.env 测试环境）然后去修改script节点

...
"scripts": {
    "start": "dotenv -e env/dev.env react-scripts start",
    "build:dev": "dotenv -e env/dev.env react-scripts build",
    "build:test": "dotenv -e env/test.env react-scripts build",
    "build": "dotenv -e env/pord.env react-scripts build",
    "test": "cross-env PORT=8011 react-scripts test",
    "eject": "echo 'react-scripts eject'"
},
...

设置每次不打开浏览器或者切换打开浏览器

我每次想启动程序或者重启的时候页面都会自动弹出，我个人认为很烦，在你的环境的配置上加上一下配置

# 打开的浏览器 none就是不打开 切换浏览器就写上对应的 如chrome谷歌
BROWSER="none"

修改端口号

废话不多说这个很常用

# 端口号
PORT="8011"

修改打包地址

这个网上一堆让通过使用npm run eject 修改webpack配置的，个人很不推荐就去看了一下react-scripts的包在#react-script/config/paths.js32行有明确的调用，有兴趣自己看一下

# 打包的路径
BUILD_PATH="/var/example"

声明React环境变量

这个我尝试过很多次，似乎react需要特殊的前缀才能使程序正常读取，如果react想正常读取需要挂REACT_APP_前缀，例如我在测试环境是http://test.example.org而线上环境是http://example.org这种需要分环境打包的就可以尝试下面操作

测试环境env

REACT_APP_SERVER_URL="http://test.example.org"

线上环境env

REACT_APP_SERVER_URL="http://example.org"

然后通过编写一个配置类来统一管理这些变量

/**
 * env.ts
 * 服务器接口地址
 */
export const SERVER_URL: string = process.env.REACT_APP_SERVER_URL!!;

这样我们每次想拿接口API的时候就引入SERVER_URL的变量即可

沉默的个人博客