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

Question

我一直在努力使用 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
          }
        }
      ]
    ]
  }
}

有人知道如何启用和配置swc-plugin-transform-importNext.js 吗？谢谢

Answer 1

哦，我在Next.js Compiler Docs中找到了答案。

module.exports = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}"
    },
    "@mui/icons-material": {
      transform: "@mui/icons-material/{{member}}"
    },
    "@mui/styles": {
      transform: "@mui/styles/{{member}}"
    },
    "@mui/lab": {
      transform: "@mui/lab/{{member}}"
    }
  }
}