javascript - 如何在 Next.js 中为 material-ui 正确配置 babel？

Question

文档:
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'
         ],
    ]
}

要不然 ？

Answer 1

我完全可以理解你的问题。按照这个。

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',
    ],
  ]
}

重新启动您的开发服务器。

上面的 babel 配置将转换

// 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';

结果，你会注意到

更快地加载开发服务器。

更小的包大小

还可以使用 next/link 和 fallback:true 更快地进行客户端导航。

来源:Babel 配置文档
Mui
Next.js
希望它也适合你!