[英]How to properly configure babel for material-ui in Next.js?
DOCS:文档:
https://material-ui.com/guides/minimizing-bundle-size/#development-environment https://material-ui.com/guides/minimizing-bundle-size/#development-environment
"Create a .babelrc.js file in the root directory of your project: "在你的项目根目录下创建一个 .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 https://nextjs.org/docs/advanced-features/customizing-babel-config
"To add presets/plugins with custom configuration, do it on the next/babel preset like so: “要添加具有自定义配置的预设/插件,请在下一个/babel 预设上执行此操作,如下所示:
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}"
QUESTION:问题:
How to properly configure babel for material-ui in Next.js ?如何在 Next.js 中为 material-ui 正确配置 babel? My implementation below is apparently incorrect as import { ConstructionOutlined } from '@material-ui/icons';
我下面的实现显然不正确,因为import { ConstructionOutlined } from '@material-ui/icons';
is still causing very long load times in dev mode.在开发模式下仍然会导致很长的加载时间。 I observed no error messages when trying the below implementation and variations.在尝试以下实现和变体时,我没有观察到错误消息。
CODE:代码:
{
"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": []
}
OR或者
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'
],
]
}
OR ELSE ?要不然 ?
I could exactly understand your problem.我完全可以理解你的问题。 Follow this.按照这个。
npm install babel-plugin-import --save-dev
Create a .babelrc
file in the root directory of your next.js project with the following content:在你的 next.js 项目的根目录中创建一个.babelrc
文件,内容如下:
{
"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';
Source: Babel config docs来源:Babel 配置文档
Hope it works for you too!希望它也适合你!
Adding babel-plugin-transform-imports is what worked for me.添加 babel-plugin-transform-imports 对我有用。 My .babelrc file looks like this:我的 .babelrc 文件如下所示:
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-transform-imports",
{
"@material-ui/core": {
"transform": "@material-ui/core/${member}",
"preventFullImport": true
},
"@material-ui/icons": {
"transform": "@material-ui/icons/${member}",
"preventFullImport": true
}
}
]
]
}
Try using the non-esm version that you have commented out in your implementation.尝试使用您在实现中注释掉的非 esm 版本。 After doing that the build time dropped significantly for me.这样做之后,构建时间对我来说显着下降。 I did have to update styles imports for Material UI like they recommend in their documentation as well.我确实必须更新 Material UI 的样式导入,就像他们在文档中推荐的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.