一.对create-react-app 的默认配置进行自定义
1.选择安装 react-app-rewired
$ yarn add react-app-rewired customize-cra
2.修改package.json文件
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
3.在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
二.添加自定义环境变量
1.安装dotenv-cli
$ yarn global add dotenv-cli
2.在根目录下添加.env.pre文件,写入变量。
REACT_APP_TITLE='pre'
其实我们需要的并不是配置其他环境包,而是在生产环境下,配置其他的变量,根据这个变量来配置不同的东西。无论在测试环境,预发布环境,我们始终需要的是生产环境包。所以在此处,配置一个变量,用于区分生产环境。
3.修改package.json文件
找到scripts,修改里面的配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"build:pre": "dotenv -e .env.pre react-app-rewired build",
"test": "react-app-rewired test"
},
4.根据环境变量进行配置
在这里以接口地址为例
let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
baseUrl = `接口地址` // 开发环境
}else if (
process.env.NODE_ENV === 'production' &&
process.env.REACT_APP_TITLE === 'pre'
) {
baseUrl = `接口地址` // 预发布环境
} else if (
process.env.NODE_ENV === 'production' &&
process.env.REACT_APP_TITLE === 'production'
) {
baseUrl = `接口地址` // 生产环境
}