Next.js如何在Material UI和swc-plugin-transform-import中使用SWC编译器

k3bvogb1  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(126)

我一直在努力使用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吗?谢谢

uurity8g

uurity8g1#

我在Next.js编译器文档中找到了答案。

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}}"
    }
  }
}

相关问题