create-react-app 按需引入 antd 組件, 更改主題配置

引

create-react-app 建立一個 react 項目. 而後引入 antd. antd 官網的流程須要自行寫配置文件. 與 webpack 相結合. 固然這種作法也無不妥. 可是若是你也想一觀背後別有洞天的代碼. 那就看下去!

商業互捧

前端發展突飛猛進. 爲了避免使諸位同仁在看本文是產生疑惑. 在此羅列出這次項目中使用到的環境及庫的版本

1. node (v12.16.2)
2. npm (v6.14.4)
3. react (v16.13.1)
4. antd (v4.1.4)
5. less (v3.11.1)
6. less-loader (v5.0.0)
7. babel-plugin-import (v1.13.0)
8. webpack (v4.42.0)

若是, 在配置過程當中遇到問題, 可參照對應版本查找解決方案.

推薦使用 yarn

安裝依賴項

安裝 antd

# npm 
npm install antd --save

# yarn
yarn add antd
複製代碼

安裝 less, less-loader

因爲 antd 是由 less 開發的樣式組件, 因此咱們也須要引入 less 及 less-loader

# npm
npm install less less-loader --save

# yarn
yarn add less less-loader
複製代碼

安裝 babel-plugin-import

按需加載組件庫, 咱們還須要一個插件 babel-plugin-import

更改配置項時注意圖中區別

在使用 create-react-app 建立了 react 項目時. 咱們在項目目錄中是看不到關於 webpack 的配置項的. 而 create-react-app 也爲咱們提供了能看到它的方式.

暴露配置文件

咱們須要在項目終端運行一行命令:

# npm
npm run eject

# yarn
yarn eject
複製代碼

此時, 咱們就能夠看到項目中多了兩個文件夾 config 和 scripts. 再打開 package.json 發現它也是大變樣. 不過咱們關注的重點主要在 config 文件中的 webpack.config.js 上

更改配置項

// webpack.config.js

...
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 此處添加: 自定義添加less配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// 添加結束
...
複製代碼

在 file-loader 上面引入規則 順序不可變動. 當配置多個 loader 時, loader 的執行順序是從右到左, 從下到上

...
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},

// 此處添加: 自定義添加 less
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},
// 添加結束!

{
  loader: require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
// ** STOP ** Are you adding a new loader?
...
複製代碼

按需加載

...
plugins: [
  [
    require.resolve('babel-plugin-named-asset-import'),
    {
      loaderMap: {
        svg: {
          ReactComponent:
            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
        },
      },
    },
  ],
  // 此處添加: 按需引入 antd
  [
    require.resolve('babel-plugin-import'),
    {
      libraryName: 'antd',
      "libraryDirectory": "es",
      style: true
    }
  ]
  // 添加結束
],
...
複製代碼

自定義主題

...
if (preProcessor) {
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
    },
    {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true,
      },
    }
  );
}
// 此處添加: 自定義主題
if (preProcessor && preProcessor === 'less-loader') {
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap
      }
    },
    {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true,
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#ff4757',
          'link-color': '#ff4757',
          'border-radius-base': '2px',
        }
      }
    }
  );
}
// 添加結束
return loaders;
...
複製代碼

antd 樣式變量

此後, 咱們無需在任何地方引入 antd 的 css 文件!

配置結束, 運行項目!