Convert .babelrc to .babelrc.js

Question

I use Material UI and want to make the bundle size smaller by loading the components on demand.

I've got a Babel config in a .babelrc file.

At the moment the .babelrc looks like this:

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

Now I need to add the following:

 const 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' ] ]; module.exports = {plugins};

How can I do that ? It seems that .babelrc works differently to the .babelrc.js

Answer 1

As indicate in https://babeljs.io/docs/en/config-files :

For compatibility reasons, .babelrc is an alias for .babelrc.json.

So your first script is JSON format and the second one is CommonJS.

Mi suggestion is just copy the contents of plugins from your second script inside the "plugins" section of your first one, and use any JSON validation tool to make sure that the result is correct, see [1]

That being said I suggest that you use .babelrc.cjs (CommonJS) format as it is just javascript code can be formated easily using tools like prettier and support some features that JSON does not like comments, see [2]

[1] .babelrc or .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 or .baberc.cjs

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

const presets
const 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'
  ]
];

module.exports = {plugins};