likes
comments
collection
share

Next.js使用SWC按需打包ant design 4.x

作者站长头像
站长
· 阅读数 481

本文只针对Next.js中的SWC按需编译样式ant design组件库4.x版本，5版本采用了css in js无需按需编译

在Next.js 13以后系统全面使用SWC进行编译，如果你的项目中使用了babel对antd进行按需加载打包，那么在编译时系统会默认使用babel，包括后来Next.js的打包工具以及部分实验性功能也无法使用。

我在一番查找后找到了插件swc-plugin-another-transform-imports 使用方法很简单。

npm install --save-dev swc-plugin-another-transform-imports
# or
yarn add -D swc-plugin-another-transform-imports

需要注意的是，这个插件的next.js的版本一定要对上。需要实时关注一个这个表。

Next.js使用SWC按需打包ant design 4.x

next.config.js:

  experimental: {
    scrollRestoration: true,
    legacyBrowsers: false,
    swcPlugins: [
      [
        "swc-plugin-another-transform-imports",
        {
          antd: {
            transform: "antd/lib/${member}",
            skipDefaultConversion: false,
            preventFullImport: true,
            style: "antd/lib/${member}/style/index.css",
            memberTransformers: ["dashed_case"],
          },
        },
      ],
    ],
  },

这是我在GitHub上和作者沟通的记录：https://github.com/lonelyhentai/swc-plugin-another-transform-imports/issues/2