如何讓create-react-app錦上添花，知足實際需求？

create-react-app 是 React 官方爲咱們提供的一個單頁應用腳手架，基於 webpack 配置了相關功能，babel、 圖片處理、熱加載、css 模塊化、css 預處理器轉換、代碼分隔、生產構建、測試等。文檔在這 create-react-app。強烈建議去看一看。

建議使用 npx create-react-app myapp 本地安裝，而不是全局安裝，以便更好的管理項目。

前端部分

在必定程度上來講，官方提供的腳手架已經接近完美了，接下來，擴展讓它更完美。

腳手架默認把 webpack 等繁瑣複雜的配置給隱藏起來了，目的是讓開發者專一於項目。但也提供了一個命令npm run eject來暴露相關配置，但這個行爲是不可逆的。

咱們要作的是錦上添花，在不暴露相關配置的狀況下進行。

修改默認啓動端口號：3000

在實際中，好比有多個應用，那麼端口號衝突是很常見的，那麼如何修改默認端口號呢？

1. 安裝 npm install --save-dev cross-env，保證兼容性，由於 window 不支持直接PORT=5000 node scripts/start.js
2. package.json 文件中啓動命令前加入cross-env PORT=設置的端口號

"scripts": {
    "start": "cross-env PORT=5000 node scripts/start.js"
  },

安裝庫

• axios
• react-router-dom
• redux、react-redux
• antd
• ...

修改打包後的資源路徑爲相對路徑

在實際應用中，打包後的資源須要使用相對路徑，只需在 package.json 中進行以下配置：

{
    "scripts": {
        ...
    },
    "homepage": "."
}

擴展 webpack 配置

使用 react-app-rewired，安裝這個工具後，在項目根目錄中新建文件 config-overrides.js 文件。此時咱們即可以在其中進行各類 webpack 的配置了~

可是！react-app-rewired2.x 之後，再也不支持 injectBabelPlugin 的方式，須要安裝 customize-cra。

具體的，ant design 官方文檔已經給出了最新的解決方案。請前往詳覽。https://ant.design/docs/react/use-with-create-react-app-cn

這種方式就是咱們推薦的方式。由於無需生成更多額外的文件，同時配置又趨於更簡單可控的方式。

具體的操做步驟：

首先，安裝 react-app-rewired：

npm install react-app-rewired --save-dev

而後修改package.json文件以下：

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

接着，安裝 customize-cra：

npm install customize-cra --save-dev

而後在根目錄下添加 config-overrides.js文件，並進行配置，配置可參考customize-cra 文檔：

1. react 項目中咱們最經常使用的組件庫 antd，咱們須要配置按需加載：

使用 babel-plugin-import，它是一個用於按需加載組件代碼和樣式的 babel 插件。

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

配置 webpack：

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

1. antd 自定義主題

按照配置主題的要求，自定義主題須要用到 less 變量覆蓋功能。

安裝less和less-loader

npm install less less-loader --save-dev

配置 webpack：

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

這裏利用了less-loader的modifyVars來進行主題配置。固然這裏的modifyVars的值也能夠是一個theme文件。

1. 打包後咱們會發現靜態文件夾中會有不少的 css 和 js 的 map 文件，那麼該怎麼關閉sourcemap呢？

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

1. 其餘配置

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

// 補充：對開發友好，打包完成桌面提醒
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

// 關閉 sourcemap
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  // 按需加載
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css' // 按需加載
    style: true // antd 自定義主題 less
  }),
  // antd 自定義主題 less 變量覆蓋全局 依賴 less、less-loader
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#814a96'
    }
  }),
  // 配置別名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
    'pages': path.resolve(__dirname, 'src/pages')
  }),
  // 容許使用.babelrc文件進行Babel配置。
  useBabelRc(),
  // 裝飾器 依賴 @babel/plugin-proposal-decorators
  addDecoratorsLegacy(),
  // 打包編譯完成提醒
  addWebpackPlugin(new WebpackBuildNotifierPlugin({
    title: "My Project Webpack Build",
    logo: path.resolve("./img/favicon.png"),
    suppressSuccess: true
  }))
)

npm install @babel/plugin-proposal-decorators --save-dev

npm install webpack-build-notifier --save-dev

proxy 代理

前端跨域處理。

在 src 目錄下新建文件 setupProxy.js

安裝 http-proxy-middleware：

npm install http-proxy-middleware --save-dev

配置 setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

兼容 IE9

使用 create-react-app 官方提供的 react-app-polyfill，而後在入口文件 index.js 中引入

npm install react-app-polyfill --save

import 'react-app-polyfill/ie9'

後端部分

在實際工做中，需求肯定後，先後端每每是同步開發的，對於接口的提供，後端沒那麼及時，但此時前端怎麼在沒有後端接口的狀況下，還能正常開發呢，保證功能的正常。

答案是：mock 數據。

那麼如何 mock 數據呢，方式不少，好比利用 easymock 在線模擬接口數據，固然最好的方式是本身搭建 node 服務，模擬接口及數據，更靈活，也能提高技術，瞭解後端的一些知識，更好的溝通與交流。

在 src 目錄下新建文件夾 server-node，而後在下面再建一個 index.js 做爲入口文件。

安裝庫

• koa
• koa-router
• koa-body
• ...

koa 相關知識，請自行學習。

重啓，熱加載

和前端同樣，改了文件，會自動重啓。

安裝 nodemon：

npm install nodemon --save-dev

配置 package.json

scripts: {
  server: 'nodemon server-node/index.js'
}

大概就這些了，有更好的建議或配置的，也請多多指教~~