antd 按需引入

antd 按需引入

01 CRA 创建项目后

1
2
// 暴露 config 文件夹
npm run eject

02 安装 antd 和 babel-plugin-import

1
2
3
// 安装 adtd 以及 babel-plugin-import
npm i babel-plugin-import -D
npm i antd

03 配置 antd 按需加载

找到下列文件增加配置

  • webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 1.找到这个位置
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 1.加入下列配置
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;


// 2.找到这个位置
{
    test: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
    }),
 },
 // 2.加入下列配置
 {
     test: lessRegex,
         exclude: lessModuleRegex,
             use: getStyleLoaders({
                 importLoaders: 2,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
             }),
                 sideEffects: true,
 },
 {
     test: lessModuleRegex,
         use: getStyleLoaders({
             importLoaders: 2,
             modules: true,
             getLocalIdent: getCSSModuleLocalIdent,
             sourceMap: isEnvProduction && shouldUseSourceMap,
         }),
 },

  • package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"babel": {
    "presets": [
      "react-app"
    ],
//加入以下信息
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }

04 测试

1
2
import { Button } from 'antd'
;<Button type="primary">测试</Button>