Babel can configured in node project in two different ways depending on project structure and usage:

Project-wide configuration

  • This can configured in following way:
    • babel.config.* files, with the following extensions: .json, .js, .cjs, .mjs, .cts.
  • Configuration mentioned inside babel.config.* files apply broadly to the entire files in the project along with the files present inside node_modules.

File-relative configuration

  • This can configured in following ways:
    • .babelrc.* files, with the following extensions: .json, .js, .cjs, .mjs,.cts.
    • .babelrc file, with no extension.
    • package.json files, with a "babel" key.
  • Configuration mentioned inside .babelrc.* files apply to the subsections of the package in the MonoRepos.
    • What is a monorepo?
      • A monorepo is a version-controlled code repository that holds many projects.
      • While these projects may be related, they are often logically independent and run by different teams.
      • For Example:
packages/
  mod1/
    package.json
    src/index.js
  mod2/
    package.json
    src/index.js

Besides Above, File Structure inside remains Same

{
  "presets": [...],
  "plugins": [...]
}

Presets and Plugins is already explained in previous blog.

Using Presets and Plugins

To use presets and plugins effectively, follow these steps:

  • Install Presets and Plugins: Install the necessary presets and plugins as project dependencies. For instance, to use the "@babel/preset-env" preset, run: npm install --save-dev @babel/preset-env
  • Configure .babelrc: In your .babelrc file, specify the presets and plugins you want to use. You can customize them based on your project’s requirements.
  • Target Environments: Optionally, configure the "targets" option within the preset to specify the target environments. For example, you can specify which browsers or Node.js versions to support.

Presets Structure

  • With No Options
{
  "presets": ["@babel/preset-env"]
}
----------------------------------OR------------------------
{
 "presets": [
     ["@babel/preset-env"]
  ]
}
----------------------------------OR------------------------
{
  "presets": [
     ["@babel/preset-env", {}]
   ]
}
  • With Options
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

Plugins Structure

  • With No Options
{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}
----------------------------------OR------------------------
{
 "presets": [
     ["babel-plugin-myPlugin"],
     ["@babel/plugin-transform-runtime"]
  ]
}
----------------------------------OR------------------------
{
  "presets": [
      ["babel-plugin-myPlugin", {}],
     ["@babel/plugin-transform-runtime",{}]
   ]
}
  • With Options
{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}