Next.js如何使用SWC编译器与Material UI和SWC插件转换导入

Question

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

我试图利用swc插件转换导入来代替babel插件转换导入，以缩短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吗？谢谢

Answer 1

哦，我在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}}"
}
}
}

Answer 2

对于从13.4.x开始使用Next.js版本的任何人来说，一些流行的包现在已经由Next.js预先配置了modularizeImports(例如，antd、mui、lodash等(。

PR 1和2。