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