最近做的項目需要準(zhǔn)備三個環(huán)境，一個開發(fā)環(huán)境（development）洼畅，一個演示環(huán)境（demo）棚赔，一個正式環(huán)境（production），項目中不同的環(huán)境使用不同的頁面title和favicon圖標(biāo)靠益。
這個時候就需要根據(jù)不同的環(huán)境變量去加載不同的title和icon胧后。首先我們需要安裝dotenv-cli,運行命令
npm install dotenv-cli --save-dev
然后我們在項目的根目錄創(chuàng)建 .env.development纸巷、.env.demo、.env.production 三個文件存哲，文件內(nèi)容是
// .env.development
REACT_APP_FAVICON=./development_favicon.png
REACT_APP_TITLE=[Dev]項目的title
// .env.demo
REACT_APP_FAVICON=./demo_favicon.png
REACT_APP_TITLE=[Demo]項目的title
// .env.production
REACT_APP_FAVICON=./production_favicon.png
REACT_APP_TITLE=項目的title
然后我們在項目的index.html中引入環(huán)境變量
<link rel="shortcut icon" href="%REACT_APP_FAVICON%" />
<title>%REACT_APP_TITLE%</title>
最后我們需要配置不同的打包命令
"start": "node scripts/start.js",
"build": "node --max_old_space_size=4096 scripts/build.js",
"test": "node scripts/test.js",
"build:dev": "dotenv -e .env.development node --max_old_space_size=4096 scripts/build.js",
"build:prod": "dotenv -e .env.production node --max_old_space_size=4096 scripts/build.js",
"build:demo": "dotenv -e .env.demo node --max_old_space_size=4096 scripts/build.js"
增加build:dev肩袍、build:demo、build:prod三條命令，開發(fā)環(huán)境運行yarn build:dev撩笆，演示環(huán)境運行yarn build:demo、正式環(huán)境運行yarn build:prod歹鱼，這樣我們就能實現(xiàn)分環(huán)境打包了
