如何在Next.js中正确地配置babel的材质-ui？

Question

DOCS:

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中正确地配置babel的材质-ui？下面的实现显然是不正确的，因为import { ConstructionOutlined } from '@material-ui/icons';在dev模式下仍然会导致很长的加载时间。在尝试下面的实现和变体时，我没有发现任何错误消息。

代码：

{
    "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

我完全能理解你的问题。跟着这个。

1. npm install babel-plugin-import --save-dev
2. 在.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',
    ],
  ]
}

1. 重新启动开发服务器。

• 以上的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';

• 因此，您将注意到
  • 更快地加载开发服务器。
  • 小束尺寸
  • 还有更快的客户端导航，下一个/链接和回退:true。

资料来源: Babel config docs

梅伊

Next.js

希望它也适用于你！

Answer 2

添加imports是对我有用的。我的.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
        }
      }
    ]
  ]
}

尝试使用您在实现中注释掉的非esm版本。这样做之后，我的构建时间就大大减少了。我必须更新材料UI的导入样式，就像它们在文档中推荐的那样。