基於create-react-app的再配置

前面的話

　　使用Facebook官方推出的create-react-app腳手架，我們基本可以零配置搭建基於webpack的React開發環境。但是，如果需要個性化定製，則還需要基於create-react-app進行再配置

環境變數

　　在根目錄下新建.env.local文件，可以用於本地環境變數覆蓋

　　如在該文件中進行如下設置

PORT=2000

　　則開發伺服器會在2000埠開啟服務

配置代理

　　在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
    }
  }

　　由於create-react-app預設支持fetch，所以在組件中使用fetch獲取數據，結果顯示在了控制臺中

fetch('api/comments/show?id=4199740256395164&page=1').then(res => {
  res.json().then(data => {
    console.log(data)
  })
})

配置別名

　　使用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'的絕對路徑了