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

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

npm install dotenv-cli --save-dev

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

// .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中引入环境变量

<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三条命令，开发环境运行yarn build:dev，演示环境运行yarn build:demo、正式环境运行yarn build:prod，这样我们就能实现分环境打包了