关于前端: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按需引入，没了，拜~~