文档:
https://material-ui.com/guides/minimizing-bundle-size/#development-environment
"在你的项目根目录下创建一个 .babelrc.js 文件:
const plugins = [
[
'babel-plugin-transform-imports',
{
'@material-ui/core': {
// Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
'transform': '@material-ui/core/esm/${member}',
'preventFullImport': true
},
'@material-ui/icons': {
// Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
'transform': '@material-ui/icons/esm/${member}',
'preventFullImport': true
}
}
]
];
module.exports = {plugins};"
https://nextjs.org/docs/advanced-features/customizing-babel-config“要添加具有自定义配置的预设/插件,请在下一个/babel 预设上执行此操作,如下所示:
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}"
问题:
如何在 Next.js 中为 material-ui 正确配置 babel?我在下面的实现显然是不正确的
import { ConstructionOutlined } from '@material-ui/icons';
在开发模式下仍然会导致很长的加载时间。在尝试以下实现和变体时,我没有观察到错误消息。代码:
{
"presets": [
[
"next/babel",
{
"babel-plugin-transform-imports":
{
"@material-ui/core": {
// Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
"transform": "@material-ui/core/esm/${member}",
"preventFullImport": true
},
"@material-ui/icons": {
// Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
"transform": "@material-ui/icons/esm/${member}",
"preventFullImport": true
}
}
}
]
],
"plugins": []
}
或者module.exports = {
presets: [
["next/babel"]
],
plugins: [
[
'babel-plugin-import',
{
'libraryName': '@material-ui/core',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'core'
],
[
'babel-plugin-import',
{
'libraryName': '@material-ui/icons',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'icons'
],
]
}
要不然 ?
最佳答案
我完全可以理解你的问题。按照这个。
npm install babel-plugin-import --save-dev
.babelrc
在 next.js 项目的根目录中创建文件,内容如下:{
"presets": ["next/babel"],
"plugins": [
[
'babel-plugin-import',
{
libraryName: '@mui/material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'core',
],
[
'babel-plugin-import',
{
libraryName: '@mui/icons-material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'icons',
],
]
}
// from
import { Button, TextField } from '@mui/material'; ( great developer experience)
// to
import Button from '@mui/material/Button'; (smaller bundle size means great user experience)
import TextField from '@mui/material/TextField';
来源:Babel 配置文档
Mui
Next.js
希望它也适合你!
关于javascript - 如何在 Next.js 中为 material-ui 正确配置 babel?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68512855/