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······等等
