react分环境打包配置

时间：2025-03-23 17:30:18

create-react-app 2.0生成的项目分环境打包

最近做的项目需要准备三个环境，一个开发环境（development），一个演示环境（demo），一个正式环境（production），项目中不同的环境使用不同的页面title和favicon图标。
这个时候就需要根据不同的环境变量去加载不同的title和icon。首先我们需要安装dotenv-cli,运行命令

npm install dotenv-cli --save-dev

然后我们在项目的根目录创建 .、.、. 三个文件，文件内容是

// .
REACT_APP_FAVICON=./development_favicon.png
REACT_APP_TITLE=[Dev]项目的title

// .
REACT_APP_FAVICON=./demo_favicon.png
REACT_APP_TITLE=[Demo]项目的title

// .
REACT_APP_FAVICON=./production_favicon.png
REACT_APP_TITLE=项目的title

然后我们在项目的中引入环境变量

<link rel="shortcut icon" href="%REACT_APP_FAVICON%" />
<title>%REACT_APP_TITLE%</title>

最后我们需要配置不同的打包命令

    "start": "node scripts/",
    "build": "node --max_old_space_size=4096 scripts/",
    "test": "node scripts/",
    "build:dev": "dotenv -e . node --max_old_space_size=4096 scripts/",
    "build:prod": "dotenv -e . node --max_old_space_size=4096 scripts/",
    "build:demo": "dotenv -e . node --max_old_space_size=4096 scripts/"

增加build:dev、build:demo、build:prod三条命令，开发环境运行yarn build:dev，演示环境运行yarn build:demo、正式环境运行yarn build:prod，这样我们就能实现分环境打包了

react

相关文章