create-react-app中配置antd按需加載、less、proxy、路徑別名、高階組件裝飾器

配置antd、less、路徑別名、裝飾器

第一步

// 安裝一下須要的插
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader    
複製代碼

第二步

修改package.json文件,將:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}
複製代碼

修改成：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}
複製代碼

第三步

在跟目錄建立一個config-overrides.js的文件，內容爲:

const { override, fixBabelImports, addLessLoader, addWebpackAlias, addDecoratorsLegacy } = require('customize-cra');
const path = require('path');
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = override(
    // antd按需加載，不須要每一個頁面都引入「antd/dist/antd.css」了
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //這裏必定要寫true，css和less都不行
    }),
    // 添加裝飾器的能力
    addDecoratorsLegacy(),
    // 配置路徑別名
    addWebpackAlias({
      "@": resolve("src")
    }),
    addLessLoader({
      javascriptEnabled: true,
      //下面這行很特殊，這裏是更改主題的關鍵，這裏我只更改了主色，固然還能夠更改其餘的，下面會詳細寫出。
      modifyVars: { "@primary-color": "#f47983"}
    })
)
複製代碼

這裏必定注意在組件裏邊使用方法變了

// import Button from 'antd/es/button';
import { Button } from 'antd';
複製代碼

這裏除了能夠配置全局主色，還能夠更改不少選項：

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 連接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯誤色
@font-size-base: 14px;                           // 主字號
@heading-color: rgba(0, 0, 0, .85);              // 標題色
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius-base: 4px;                        // 組件/浮層圓角
@border-color-base: #d9d9d9; // 邊框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮層陰影
複製代碼

配置proxy

1. 安裝 http-proxy-middleware

yarn add http-proxy-middleware --dev
複製代碼

2. 在src目錄下新建 setupProxy.js而且寫入:

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
      proxy(
          'aabbbcccc.json',
          {
            target: 'https://www.baidu.com',
            changeOrigin: true
          }
      )
  );
複製代碼

3. 重啓服務試一試