快速安裝create-react-app(以下簡稱CRA)

npm
npx create-react-app my-app
Yarn
yarn create react-app my-app

啟動項目

cd my-app
npm start

生成目錄結(jié)構(gòu)

create-react-app目錄結(jié)構(gòu)

1. package.json
   
   package.json代碼

react-scripts

這里面多了個react-scripts膳凝，這個就是這個腳手架的核心，我們先觀摩一下這個庫的目錄

eact-scripts目錄

看到這個是不是感覺特別的熟悉恭陡，其實它就是把webpake的配置都封裝在這個庫里面蹬音，腳手架都已經(jīng)幫我們都配置好了，是不是感覺特別的簡單休玩，啥都沒做就能啟動一個項目了祟绊。
該項目支持最新的JavaScript標(biāo)準(zhǔn)的超集。除了es6的語法哥捕，create-react-app還支持：

• 自動處理 CSS 的兼容問題，無需添加 -webkit 前綴
• Async/await語法(ES2017)
• 對象的解構(gòu)賦值
• 動態(tài)import 語法
• React嘉熊，JSX遥赚，ES6，TypeScript和Flow語法

另外官方僅僅包含了很少一個部分的ES6 polyfills:

• Object.assign() 支持 object-assign
• Promise 支持阐肤，promise
• fetch支持凫佛，whatwg-fetch

所以當(dāng)用到一些需要polyfills的功能時，某些polyfills需要手動添加

啟動命令

npm start
啟動項目孕惜，假如有端口沖突時在package中的scripts 設(shè)置"set PORT=3003&&react-scripts start "即可完美解決愧薛。

npm build
在生產(chǎn)環(huán)境中編譯代碼，并放在build目錄中
能夠正確的打包代碼衫画，并且優(yōu)化毫炉，壓縮，使用hash重命名文件
每次打包都會把上一次余留在build的文件清空

npm test
啟動測試運(yùn)行程序

npm run eject
注意：這是一個單向操作削罩，一旦你使用eject瞄勾，那么就不能恢復(fù)了,謹(jǐn)慎使用!

• eject其實就是將webpack配置都暴露出來费奸，這樣目錄不優(yōu)雅，CRA本身就是把webpack配置弄成一個react-scripts包隱藏起來进陡，eject后就無法享受到官方react-scripts版本更新后的更多的福利了愿阐。
• 如果不eject那我們可以使用react-app-rewired對webpack進(jìn)行修改和新增。如果npm run eject跟我們平常的配置沒什么區(qū)別了趾疚，目錄下將新增config和scripts缨历，package.json也發(fā)生變化了。
• 是否使用eject需要根據(jù)項目來權(quán)衡糙麦，如果您的項目需要更多的自定義辛孵，您可以“eject并自定義它，但是之后您將需要維護(hù)這個配置喳资。

eject后目錄

我們在安裝less觉吭，antd之前應(yīng)該先安裝一下修改配置文件。

react-app-rewired

react-app-rewired 是 react 社區(qū)開源的一個修改 CRA 配置的工具仆邓。
在 CRA 創(chuàng)建的項目中安裝了react-app-rewired( npm install react-app-rewired --save-dev )后鲜滩，可以通過創(chuàng)建一個config-overrides.js 文件來對 webpack 配置進(jìn)行擴(kuò)展。因此react-app-rewired不兼容CRA2了节值，但可以使用customize-cra來兼容CRA2徙硅。作者還推薦使用next.js或Razzle腳手架，它們都支持開箱即用的自定義Webpack,有空時后面在介紹這兩種使用搞疗。

安裝

• react-app-rewire
  npm install react-app-rewired --save-dev
• customize-cra
  npm install customize-cra --save-dev

• 我們在根目錄新建一個config-overrides.js 文件

const {
  override,
  addLessLoader,
  addDecoratorsLegacy,
  disableEsLint,
  useBabelRc,
  addWebpackAlias
} = require('customize-cra')
const path = require('path')

module.exports = override(
  //添加修飾器 根目錄下創(chuàng)建.babelrc
  useBabelRc(),
  //禁用默認(rèn)eslint嗓蘑，使用自定義eslint,根目錄下創(chuàng)建.eslintrc.js
  disableEsLint(),
  //在傳統(tǒng)模式下添加裝飾器。一定要@babel/plugin-proposal-decorators安裝
  addDecoratorsLegacy(),
  //添加less-loader配置
  addLessLoader(),
  //配置簡化路徑
  addWebpackAlias(
    {
      '@style': path.resolve(__dirname, 'src/style'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@resource': path.resolve(__dirname, 'src/resource'),
      '@components':path.resolve(__dirname, 'src/components'),
      '@config': path.resolve(__dirname, 'src/config'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  )
)

上面都有注釋我就不詳細(xì)講了匿乃。就是在這前先把@babel/plugin-proposal-decorators安裝好（npm install --save-dev @babel/plugin-proposal-decorators）桩皿。
配置好之后不要完了配置啟動命令

• package.json

 "scripts": {
    "start": "set PORT=5555 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

安裝less

npm install less less-loader --save-dev

你的less好了，你可以去試試看了

安裝antd

npm install antd -save-dev

按需引用antd模塊幢炸，使用 babel-plugin-import（推薦）

npm install babel-plugin-import --save-dev

修改配置文件 .babelrc

{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 會加載 less 文件
  ]
}

antd 安裝成功了泄隔！

安裝react-router

npm install --save react-router

安裝react-router-dom

npm install --save react-router-dom

安裝axios

npm install --save axios

整個項目的配置和環(huán)境都弄好了，可以正式寫業(yè)務(wù)代碼了宛徊。

項目

• 項目完整代碼github庫(https://github.com/Pandkk/create-react)
  
  CRA編寫的后臺系統(tǒng)

補(bǔ)充

環(huán)境變量

• process.env.NODE_ENV和process.env.PUBLIC_URL讀取內(nèi)置變量佛嬉。我們設(shè)置自定義變量必須于REACT_APP_開頭

在html中引用環(huán)境變量

如：

<title>%REACT_APP_WEBSITE_NAME%</title> 

在js中引用環(huán)境變量

如：

const myName = process.env.REACT_APP.WEBSITE_NAME

設(shè)置環(huán)境變量（兩種方法）

1. 在項目根目錄下創(chuàng)建.env文件，定義環(huán)境變量(如:REACT_APP_CODE:adfc)
   2.命令行添加
   
   命令行添加環(huán)境變量

多環(huán)境

• 因為CRA只支持development闸天、production暖呕、test三個環(huán)境，當(dāng)需要對更多環(huán)境提供支持的時候（如有多個測試環(huán)境苞氮，對應(yīng)的接口都不一樣）湾揽，所以我們需要配置多環(huán)境，需要修改package.josn。

先安裝 cross-env 解決跨平臺兼容性

npm install cross-env -save

  "scripts": {
 -  "start": "react-app-rewired start",
 +  "start": "cross-env REACT_APP_ENV=development react-app-rewired start",
 -   "build": " react-app-rewired build",
 +   "build": "cross-env REACT_APP_ENV=production react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
 +   "test1" :"cross-env REACT_APP_ENV=test1 react-app-rewired build",
 +   "test2" :"cross-env REACT_APP_ENV=test2 react-app-rewired build"
  },

修改了start钝腺、build命令抛姑，新增了test1、test2測試環(huán)境艳狐。其實這個就是通過環(huán)境變量實現(xiàn)多環(huán)境定硝。

npm run build 遇到的問題

• 打包后打開index.html頁面空白報錯，原因是訪問路徑不對毫目，我需要設(shè)置在根目錄下蔬啡，在package.json下添加"homepage": "."。

• 包體積過大镀虐，里面包含了.map文件箱蟆，啟動了sourcemap，因此每次打包都會產(chǎn)生.map文件刮便。我們可以在命令行中去掉他空猜，“scripts”添加GENERATE_SOURCEMAP=false

"scripts": {
    "start": "cross-env REACT_APP_ENV=development react-app-rewired start",
    "build": "cross-env GENERATE_SOURCEMAP=false REACT_APP_ENV=production react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "test1": "cross-env GENERATE_SOURCEMAP=false REACT_APP_ENV=test1 react-app-rewired build",
    "test2": "cross-env REACT_APP_ENV=test2 react-app-rewired build"
  },

PWA(漸進(jìn)式web應(yīng)用)

Progressive Web App簡稱 PWA，是提升 Web App 的體驗的一種新方法恨旱，能給用戶原生應(yīng)用的體驗辈毯。

• 我們可以看到在src文件夾下有個registerServiceWorker.js，這文件其實就是注冊 service worker搜贤，它是在后臺運(yùn)行的一個線程谆沃，可以用來處理離線緩存、消息推送仪芒、后臺自動更新等任務(wù)唁影。這樣你下次訪問時，就可以更快的獲取資源掂名。而且因為資源離線緩存据沈，因此在離線或者網(wǎng)絡(luò)較差的情況下也正常訪問。注意饺蔑，registerServiceWorker注冊的service worker 只在生產(chǎn)環(huán)境中生效（process.env.NODE_ENV === 'production'）,還有必須是hppts服務(wù) 卓舵。如果我們想要使用cra2提供的pwa特性的話，在build前將src/index.js下的serviceWorker.unregister() 改成serviceWorker.register()注冊service worker膀钠。
• 在public文件夾中有個manifest.json文件。PWA 添加至桌面的功能實現(xiàn)依賴于 manifest.json裹虫，manifest.json用于指定應(yīng)用的顯示名稱、圖標(biāo)、應(yīng)用入口文件地址及需要使用的設(shè)備權(quán)限等信息疆液。也就是說用戶可以直接將站點添加快捷方式到桌面孽水，免去去應(yīng)用商店下載的麻煩。

在沒網(wǎng)和網(wǎng)弱的狀態(tài)下也能讀取到資源還能瞬間秒開，還能實現(xiàn)消息通知封救，添加應(yīng)用橫屏等等拇涤，還能將站點添加成快捷鍵放到桌面。使用PWA是不是感覺更像是原生app了誉结。