Javascript 将.babelrc转换为.babelrc.js

我使用MaterialUI，希望通过按需加载组件来减小捆绑包的大小

我在一个.babelrc文件中有一个Babel配置

目前，babelrc的外观如下：

{
“预设”：[“@babel/preset env”，“@babel/react”]，
“插件”：[
[“@babel/plugin语法动态导入”]，
[“react hot loader/babel”]，
[“进口”{
“图书馆名称”：“antd”，
“风格”：真的吗
}],
[
“@babel/plugin转换运行时”，
{
“再生器”：正确
}
]
]
}

如中所示：

出于兼容性原因，.babelrc是.babelrc.json的别名

第一个脚本是JSON格式，第二个是CommonJS

Mi建议只需将第二个脚本中的插件内容复制到第一个脚本的“插件”部分，并使用任何JSON验证工具确保结果正确，请参见[1]

话虽如此，我建议您使用.babelrc.cjs（CommonJS）格式，因为它只是javascript代码，可以使用prettier等工具轻松格式化，并支持JSON不喜欢注释的一些功能，请参见[2]

[1] .babelrc或.babelrc.json

    {
      "presets": ["@babel/preset-env", "@babel/react"],
      "plugins": [
        ["@babel/plugin-syntax-dynamic-import"],
        ["react-hot-loader/babel"],
        ["import", {
          "libraryName": "antd",
          "style": true
        }],
        [
          "@babel/plugin-transform-runtime",
          {
            "regenerator": true
          }
        ],
      [
        "babel-plugin-import",
        {
          "libraryName": "@material-ui/core",
          "libraryDirectory": "esm",
          "camel2DashComponentName": false
        },
        "core"
      ],
      [
        "babel-plugin-import",
        {
          "libraryName": "@material-ui/icons",
          "libraryDirectory": "esm",
          "camel2DashComponentName": false
        },
        "icons"
      ]
      ]
    }

[2] .babelrc.js或.baberc.cjs

{
“预设”：[“@babel/preset env”，“@babel/react”]，
“插件”：[
[“@babel/plugin语法动态导入”]，
[“react hot loader/babel”]，
[“进口”{
“图书馆名称”：“antd”，
“风格”：真的吗
}],
[
“@babel/plugin转换运行时”，
{
“再生器”：正确
}
]
]
常数预设
常量插件=[
[
“babel插件导入”，
{
“libraryName”：“@material ui/core”，
//如果捆绑程序不支持ES模块，请使用“'libraryDirectory'：”
'libraryDirectory'：'esm'，
“camel2DashComponentName”：false
},
“核心”
],
[
“babel插件导入”，
{
“libraryName”：“@material ui/图标”，
//如果捆绑程序不支持ES模块，请使用“'libraryDirectory'：”
'libraryDirectory'：'esm'，
“camel2DashComponentName”：false
},
“图标”
]
];
module.exports={plugins}；