react入门坑（next篇）之antd按需引入

本文使用react^17.0.1、next.js^10.0.0、babel-plugin-import^1.13.3；且只适用于next.js10版本

在使用antd时，按需引入是优化文件打包体积必不可少的一个步骤，在antd文档中直接导入模块：

import { Button } from "antd";

这样便可按需引入模块，但该按需引入只是引入了js模块，我们的样式文件还需要在_app.js中再引入：

//app.js
import "antd/dist/antd.css";

且这样的引入并不是按需引入css样式，而是一次把所有组件样式全部引入，那么在next.js10中该如何按需引入antd的css组件样式呢？
这里我们用了antd官方提倡的按需引入包 babel-plugin-import

创建babel.config.js文件

在项目根目录下我们新建一个babel.config.js文件用来配置babel配置；这里必须创建js格式文件，不能创建.babelrc文件；写入配置：

//babel.config.js
module.exports = {
    presets: ["next/babel"],
    plugins: [
        [
            "import",
            {
                libraryName: "antd",
                libraryDirectory: "lib",
                style: function (name) {
                    // console.log(name);
                    return `${name}/style/index.css`;
                },
            },
        ],
        [
            "import",
            {
                libraryName: "@ant-design/icons",
                libraryDirectory: "lib/icons",
                camel2DashComponentName: false,
            },
            "@ant-design/icons",
        ],
    ],
};

我们来解释下上述配置
presets是使用next.js自带的babel配置
plugins则是我们新增的babel配置
我们新增了两个，分别是给antd的样式引入与其icon引入使用的；css的按需引入重点在

[
    "import",
    {
        libraryName: "antd",
        libraryDirectory: "lib",
        style: function (name) {
            return `${name}/style/index.css`;
        },
    },
],

根据模块名引入对应的css，至于为什么style要用方法返回path，是因为当style的值为true时，默认引入less文件，我们这里就不多添加less配置项了（用的sass），当style的值为"css"时则会引入../lib/style目录下的css.js文件并执行引入对应的css文件,但这在next10中是不被允许的，next10中不允许中node_modules中执行js引入css,但允许直接引入css文件，这也就是为什么babel配置文件得是js格式而不能是.babelrc

这样就解决了我们的css按需引入，没了，拜~~