create-react-app的使用
2017.11.14更新
关于自定义create-react-app，我们可以选择社区提供的解决方案react-app-rewired来满足我们的大部分自定义需求
将所有配置文件暴露出来
运行
npm run eject
注意，这个是不可逆操作，它会将所有配置文件，包括webpack, eslint, babel的配置文件全部暴露出来，以便你可以全权控制所有的配置细节，考虑到create-react-app自身的完整性，如果不是万不得已的情况，尽量不要执行这个操作
关于使用css preprocessor
因为react官方是推荐进行组件复用，而不是进行样式复用，所以在基于这个前提下，像less或者sass这样的预处理器，所能发挥的作用非常的有限。当然，如果你觉得你有必须这样做的理由，可以采用以下的办法
1.使用预处理器的命令行
如使用sass
第一步，安装
npm install --save node-sass-chokidar
第二步，添加处理命令
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
只要运行npm run watch-css命令，src目录下的所有.sass文件都会被编译成.css
2.修改webpack配置
运行npm run eject将所有create-react-app的配置文件暴露出来，然后修改webpack配置
添加自定义环境变量
环境变量可以让我们在不同的环境，如dev,production环境，进行不同的配置和操作，比如，很常见的需求就是在dev环境我需要请求测试环境的接口，而在production环境我需要请求线上接口。
使用环境变量
注意
凡是在create-react-app中自定义的环境变量，都需要加上REACT_APP_前缀
在HTML中使用环境变量
<title>%REACT_APP_WEBSITE_NAME%</title>
在JS中使用环境变量
const WEBNAME = process.env.REACT_APP_WEBSITE_NAME
内置的环境变量
create-react-app内置有两个环境变量，PUBLIC_URL和NODE_ENV
PUBLIC_URL是静态资源的发布路径，在public/index.html有使用，这个默认值是''，需要自己进行配置
NODE_ENV有三个值，分别对应如下:
- 运行
npm start，为development - 运行
npm test，为test - 运行
npm run build，为production
NODE_ENV的值不能手动进行覆盖
定义环境变量
使用命令行
windows
set REACT_APP_SECRET_CODE=abcdef&&npm start
mac
REACT_APP_SECRET_CODE=abcdef npm start
使用.env文件
将.env文件放在项目根目录
REACT_APP_SECRET_CODE=abcdef
名字后面也能加后缀，不同后缀的文件对应不同的使用情况
- .env： 默认使用
- .env.local：用于本地变量覆盖，这个文件会在除了test环境的所有环境加载
- .env.development,.env.test,.env.production：在对应的环境加载
-
.env.development.local,.env.test.local,.env.production.local：在对应的环境加载，最高优先级，会覆盖
.env.*的配置
加载的优先级从高到低，依次为：
- npm start: .env.development.local, .env.development, .env.local, .env
- npm run build: .env.production.local, .env.production, .env.local, .env
- npm test: .env.test.local, .env.test, .env (note .env.local is missing)
多环境支持
因为create-react-app只支持development,production,test三个环境，当需要对更多环境提供支持的时候（比如，公司有两个测试环境，对应的接口都不一样），就需要修改下配置了。
其实很简单，只需要将create-react-app查找.env文件的一个变量(process.env.NODE_ENV)替换成自己的自定义的一个变量就行了
先运行npm run eject将所有配置项暴露出来
修改config/env.js下前面的几行代码中的其中一句
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
//**************这句代码******************
// const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.FS_ENV
//...
然后，在package.json中添加
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
+ "build-test1": "set FS_ENV=test1&&node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
然后在根目录添加.env.test1，自定义的一个环境文件就能被加载了
上面是添加了一个test1环境，同理还能添加test2,test3······等等
