2017.11.14更新
關(guān)于自定義create-react-app堕绩，我們可以選擇社區(qū)提供的解決方案react-app-rewired來滿足我們的大部分自定義需求
將所有配置文件暴露出來
運行
npm run eject
注意妒峦，這個是不可逆操作筝尾，它會將所有配置文件膜眠，包括webpack, eslint, babel的配置文件全部暴露出來低剔，以便你可以全權(quán)控制所有的配置細節(jié)歪脏，考慮到create-react-app自身的完整性技潘，如果不是萬不得已的情況，盡量不要執(zhí)行這個操作
關(guān)于使用css preprocessor
因為react官方是推薦進行組件復(fù)用分飞，而不是進行樣式復(fù)用悴务，所以在基于這個前提下，像less或者sass這樣的預(yù)處理器譬猫，所能發(fā)揮的作用非常的有限惨寿。當(dāng)然，如果你覺得你有必須這樣做的理由删窒，可以采用以下的辦法
1.使用預(yù)處理器的命令行
如使用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配置
添加自定義環(huán)境變量
環(huán)境變量可以讓我們在不同的環(huán)境特碳，如dev,production環(huán)境诚亚，進行不同的配置和操作，比如午乓，很常見的需求就是在dev環(huán)境我需要請求測試環(huán)境的接口站宗，而在production環(huán)境我需要請求線上接口。
使用環(huán)境變量
注意
凡是在create-react-app中自定義的環(huán)境變量益愈，都需要加上REACT_APP_前綴
在HTML中使用環(huán)境變量
<title>%REACT_APP_WEBSITE_NAME%</title>
在JS中使用環(huán)境變量
const WEBNAME = process.env.REACT_APP_WEBSITE_NAME
內(nèi)置的環(huán)境變量
create-react-app內(nèi)置有兩個環(huán)境變量梢灭，PUBLIC_URL和NODE_ENV
PUBLIC_URL是靜態(tài)資源的發(fā)布路徑，在public/index.html有使用蒸其，這個默認(rèn)值是''敏释，需要自己進行配置
NODE_ENV有三個值，分別對應(yīng)如下:
- 運行
npm start摸袁，為development - 運行
npm test钥顽，為test - 運行
npm run build，為production
NODE_ENV的值不能手動進行覆蓋
定義環(huán)境變量
使用命令行
windows
set REACT_APP_SECRET_CODE=abcdef&&npm start
mac
REACT_APP_SECRET_CODE=abcdef npm start
使用.env文件
將.env文件放在項目根目錄
REACT_APP_SECRET_CODE=abcdef
名字后面也能加后綴靠汁，不同后綴的文件對應(yīng)不同的使用情況
- .env： 默認(rèn)使用
- .env.local：用于本地變量覆蓋蜂大，這個文件會在除了test環(huán)境的所有環(huán)境加載
- .env.development,.env.test,.env.production：在對應(yīng)的環(huán)境加載
-
.env.development.local,.env.test.local,.env.production.local：在對應(yīng)的環(huán)境加載闽铐，最高優(yōu)先級，會覆蓋
.env.*的配置
加載的優(yōu)先級從高到低奶浦，依次為：
- 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)
多環(huán)境支持
因為create-react-app只支持development,production,test三個環(huán)境兄墅，當(dāng)需要對更多環(huán)境提供支持的時候（比如，公司有兩個測試環(huán)境财喳，對應(yīng)的接口都不一樣）察迟，就需要修改下配置了。
其實很簡單耳高，只需要將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，自定義的一個環(huán)境文件就能被加載了
上面是添加了一個test1環(huán)境泌枪，同理還能添加test2,test3······等等
