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

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种方法，不过减去了手动操作的麻烦

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

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'],
  },