基於create-react-app的再配置

小火柴的藍色理想發表於2018-03-02

前面的話

  使用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'
  }
]

   

相關文章