[英]Next.js how to use SWC compiler with Material UI and swc-plugin-transform-import
I've been struggling with transforming imports with Next.js using SWC complier.我一直在努力使用 SWC 编译器转换 Next.js 的导入。
I'm trying to make use of swc-plugin-transform-import as a replacement of babel-plugin-transform-imports for shorting on Material UI imports.我正在尝试使用swc-plugin-transform-import代替babel-plugin-transform-imports来缩短 Material UI 导入。
As documented, I've tried with this settings.如文档所述,我已尝试使用此设置。 It shows experimental warning, but other than that it ignores plugin all together.
它显示了实验性警告,但除此之外,它完全忽略了插件。
// 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
}
}
]
]
}
}
Anyone knows how to enable and configure swc-plugin-transform-import
for Next.js?有人知道如何为 Next.js 启用和配置
swc-plugin-transform-import
吗? Thank you谢谢
Oh I've found an answer in Next.js Compiler Docs .哦,我在Next.js Compiler Docs中找到了答案。
module.exports = {
swcMinify: true,
experimental: {
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}}"
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.