https://babeljs.io/docs/en/

Overview

Running these commands to install the packages:

1
2
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

Creating a config file named babel.config.json in the root of your project with this content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.4",
      }
    ]
  ]
}

And running this command to compile all your code from the src directory to lib:

1
./node_modules/.bin/babel src --out-dir lib

Presets

Presets, on the other hand, are the combinations of Plugins which help simplify the workflow by avoiding installation of multiple Plugins and worrying about the invokation order.

Preset Paths

If the preset is on npm, you can pass in the name of the preset and babel will check that it’s installed in node_modules

'@vue/cli-plugin-babel/preset' -> node_modules/@vue/cli-plugin-babel/preset.js

relative path

preset shorthand

babel-preset-

1
2
3
4
5
6
{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

creating a preset

plugins

polyfill

You can satisfy all Babel feature requirements by using @babel/polyfill.