前面的話
使用Facebook官方推出的create-react-app腳手架,我們基本可以零配置搭建基於webpack的React開發環境。但是,如果需要個性化定製,則還需要基於create-react-app進行再配置
環境變數
【設定】
在根目錄下新建.env檔案,可以用於本地環境變數覆蓋
如在該檔案中進行如下設定
PORT=2000
則開發伺服器會在2000埠開啟服務
【預設】
預設支援的環境變數有: NODE_ENV 和 PUBLIC_URL
NODE_ENV: 該變數是自動賦值的,你不可以更改它的值,對於npm start, 它的值是develepment, npm test它的值是test, 對於npm run build, 它的值是production
PUBLIC_URL: 這個變數可以用於引用模組系統之外的資源路徑字首
【區分環境】
一般地,在開發端,會使用redux-logger在控制檯顯示觸發action時的日誌,但在生產端,則完全不需要。可以使用NODE_ENV環境變數來區分環境
let store = null if (process.env.NODE_ENV === 'development') { store = createStore(rootReducer, applyMiddleware(thunk, logger)) } else { store = createStore(rootReducer, applyMiddleware(thunk)) }
【外部資源】
如果要設定靜態資源CDN,則需要在.env檔案中設定PUBLIC_URL
PUBLIC_URL = 'cdn url'
在HTML中使用
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
在Javascript中使用
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />
【自定義】
可以自定義環境變數,不過需要遵照一個約定,所有自定義環境變數均以REACT_APP_開頭
這些環境變數會定義在process.env中。例如,環境變數REACT_APP_SECRET_CODE會在JS中暴露為process.env.REACT_APP_SECRECT_CODE
【更新】
目錄react-scripts最新版本是1.1.4,以如下方式進行更新
npm install --save --save-exact react-scripts@1.1.4
配置代理
在package.json中配置,與其他專案同級
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "proxy": { "/api": { "target": "https://m.weibo.cn", "changeOrigin": true, "pathRewrite":{"^/api":""} } }
由於create-react-app預設支援fetch,所以在元件中使用fetch獲取資料,結果顯示在了控制檯中
fetch('api/comments/show?id=4199740256395164&page=1').then(res => { res.json().then(data => { console.log(data) }) })
配置別名
【rewire】
使用react-app-rewired來進行react的再配置,首先使用npm安裝
$ npm install react-app-rewired --save-dev
然後,更改package.json中的scripts部分
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-app eject" },
然後,在根目錄新建config-overrides.js檔案,配置如下
const path = require('path'); function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = function override(config, env) { config.resolve.alias = { '@': resolve('src') } return config; }
重啟開發伺服器後,就可以使用@來表示'src'的絕對路徑了
【eject】
或者,npm run eject之後 ,直接更改config目錄下的dev.js和prod.js檔案中的alias設定
alias: { '@': path.join(__dirname, '..', 'src'), ... },
配置eslint
安裝外掛
npm install react-app-rewired react-app-rewire-eslint --save
在根目錄下新建.eslint.js檔案,檔案中一定要新增如下配置
module.exports = { "parser":"babel-eslint", ...
否則,會報下面的錯誤
Parsing error: Unexpected token =
配置PWA
create-react-app中有預設的service worker設定,但是沒有對介面快取進行處理
下面對SWPrecacheWebpackPlugin外掛的配置增加如下處理
runtimeCaching: [{ urlPattern: '/', handler: 'networkFirst' }, { urlPattern: /\/(posts|categories|recommends|users)/, handler: 'networkFirst' }, { urlPattern: '/posts/:id', handler: 'networkFirst' } ]