ant-design 引入样式及配置 babel-plugin-import 按需加载

叁歲伎倆 2022-02-27 02:12 1162阅读 0赞

### ant-design 引入样式的几种方式 ###

#### 1 全局引用 ####

js代码引入 ant-design 的 `Button` 组件

import React, {  Component } from 'react';
    import Button from 'antd/lib/button';
    import './App.css';
    
    class App extends Component { 
      render() { 
        return (
          <div className="App">
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }
    
    export default App;

修改 `App.css`，文件头部引入 `antd/dist/antd.css`

@import '~antd/dist/antd.css';

引用的方式很容易，不过这实际上加载了全部的 antd 组件的样式文件，对前端性能是个隐患

#### 2 单个组件分别引入对应的样式文件 ####

比如想要引入 `Button` 组件和其对应的 css 样式

import {  Button } from 'antd'
    import 'antd/lib/button/style'

这样也算是“按需加载”，不过比较麻烦，每次写一个新组件，都要先载入 antd 组件，再载入对应 css 文件，代码冗余（而且写着也麻烦，你多引几个组件就要多写几行代码，程序员嘛都是要偷下懒的）

#### 3 使用 babel-plugin-import 实现按需加载 ####

使用 `babel-plugin-import`

import {  Button } from 'antd'

地址会自动转换为 `antd/lib/button`，配合 `style` 属性可以做到模块样式按需自动加载，编译之后的效果同上面第2种方法，不过减去了手动操作的麻烦

具体介绍可以看下[官方手册][Link 1]，我这提一下基本用法

npm install babel-plugin-import -D

然后在 `.babelrc` 配置文件中，举个例子可以添加以下`配置代码`：

{ 
      "plugins": [
        ["import", {  
            "libraryName": "antd",
            "libraryDirectory": "lib",  // libraryDirectory 默认为 lib
            "style": "css" ,
        }],
      ],
    }

总共有三种`配置代码`，配置不当不仅样式会无法生效，而且会报未引入 loader 的 bug：  
`You may need an appropriate loader to handle this file type.`

*  `["import", { "libraryName": "antd" }]`：引入的是 js 模块
 *  `["import", { "libraryName": "antd", "style": true }]`：引入的是 less 文件，需要在 `webpack.config.js` 额外配置 less-loader 等，且不能在 `module.rules` 中把 `node_modules/antd` 给 exclude 了，如下操作
    
        {
            test: /\.less$/,
            exclude: /node_module/, // 会忽略node_module/antd，会报错，应删去
            use: ['style-loader', 'css-loader', 'less-loader'],
        },
 *  `["import", { "libraryName": "antd", "style": css }]`：引入的是 css 文件，需要在 `webpack.config.js` 额外配置 css-loader 等，且不能在 `module.rules` 中把 `node_modules/antd` 给 exclude 了，如下操作
    
        {
            test: /\.css$/,
            exclude: /node_module/, // 会忽略node_module/antd，会报错，应删去
            use: ['style-loader', 'css-loader'],
        },

[Link 1]: https://github.com/ant-design/babel-plugin-import