Next.js 如何使用 SWC 编译器与 Material UI 和 swc-plugin-transform-import答案

【问题标题】：Next.js how to use SWC compiler with Material UI and swc-plugin-transform-importNext.js 如何使用 SWC 编译器与 Material UI 和 swc-plugin-transform-import
【发布时间】：2022-10-06 22:40:14
【问题描述】：

我一直在努力使用 SWC 编译器使用 Next.js 转换导入。

我正在尝试使用 swc-plugin-transform-import 代替 babel-plugin-transform-imports 来缩短 Material UI 导入。

如文件所述，我已尝试使用此设置。它显示了实验性警告，但除此之外它完全忽略了插件。

// next.config.js

module.exports = {
  experimental: {
    swcPlugins: [
      [
        \'swc-plugin-transform-import\',
        {
          \"@mui/material\": {
            transform: \"@mui/material/${member}\",
            preventFullImport: true
          },
          \"@mui/icons-material\": {
            transform: \"@mui/icons-material/${member}\",
            preventFullImport: true
          },
          \"@mui/styles\": {
            transform: \"@mui/styles/${member}\",
            preventFullImport: true
          },
          \"@mui/lab\": {
            transform: \"@mui/lab/${member}\",
            preventFullImport: true
          }
        }
      ]
    ]
  }
}

任何人都知道如何为 Next.js 启用和配置swc-plugin-transform-import？谢谢

标签： javascript next.js material-ui swc-compiler

【解决方案1】：

swc-plugin-transform-plugin 配置应该进入webpack.config.js 文件。

根据NextJS's docs，您需要将 webpack 配置扩展为next.config.js 文件。

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'swc-loader',
          options: {
            plugin: (m) => new PluginTransformImport({
              "lodash": {
                "transform": "lodash/${member}",
                "preventFullImport": true
              }
            }).visitProgram(m),
          }
        }]
    })

    return config
  },
  experimental: {
    swcPlugins: [
      [
        {
          "@mui/material": {
            transform: "@mui/material/${member}",
            preventFullImport: true
          },
          "@mui/icons-material": {
            transform: "@mui/icons-material/${member}",
            preventFullImport: true
          },
          "@mui/styles": {
            transform: "@mui/styles/${member}",
            preventFullImport: true
          },
          "@mui/lab": {
            transform: "@mui/lab/${member}",
            preventFullImport: true
          }
        }
      ]
    ]
  }
}

【讨论】：