Babel: JavaScript Compiler – History, Usage, and Advanced Configuration

In the previous article "CommonJS: Not Front‑End but Revolutionized Front‑End" we introduced ES6 modules. ES6 (ECMAScript 2015) brought many new language features, but browser support lagged behind developers' enthusiasm. Babel bridges this gap by compiling modern JavaScript into code that runs in older environments.

What Babel is

Babel is a JavaScript compiler. It parses source code, transforms it according to plugins and presets, and generates new code. The official definition on the Babel website is simply “Babel is a JavaScript compiler.”

It does not merely transpile to ES5; it can skip transformation for syntax already supported by the target browsers, which is why Babel relies on a browserslist configuration.

Babel’s history

The project started in 2014 as 6to5 , created by Facebook engineer Sebastian McKenzie to convert ES6 to ES5. After ES2015 was officially released, the name was changed to Babel in February 2015.

How to use Babel

Below is a minimal workflow that uses only Babel’s CLI, without any bundlers.

1. Create a new npm package and a src folder with an index.js file:

npm init -y

package.json (initial version):

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. Install Babel development dependencies:

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

3. Add a build script that compiles src to dist :

{
  "name": "demo",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "babel": "babel src --out-dir dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0"
  }
}

4. Create babel.config.js with a basic preset:

const presets = [
  [
    '@babel/env',
    { debug: true }
  ]
];
const plugins = [];
module.exports = { presets, plugins };

Running npm run babel produces dist/index.js where ES6 syntax such as const and arrow functions are transformed to ES5 equivalents.

Babel workflow

Every compilation follows three steps:

Parser – converts source code into an Abstract Syntax Tree (AST) using acorn .

Transform – applies plugins/presets to modify the AST.

Generator – emits the transformed code.

Key components

@babel/preset-env – a collection of plugins that cover most ES6+ syntax. It can be configured with targets to only transpile features not supported by the specified browsers.

@babel/polyfill (now deprecated) – used to inject built‑in polyfills such as Array.prototype.includes and Promise . Modern projects should use core-js directly.

@babel/plugin-transform-runtime – extracts helper functions (e.g., _classCallCheck ) into shared modules and provides a non‑polluting way to polyfill built‑ins via @babel/runtime or @babel/runtime-corejs3 .

Example of adding the runtime plugin:

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

const plugins = [
  '@babel/plugin-proposal-class-properties',
  ['@babel/plugin-transform-runtime']
];
module.exports = { presets, plugins };

When the runtime plugin is used, helper code is replaced with imports such as:

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

Polyfill strategies compared:

useBuiltIns: 'entry' – injects all polyfills for the target environment at the entry point.

useBuiltIns: 'usage' – injects only the polyfills actually used in the code.

@babel/plugin-transform-runtime – injects polyfills as local modules, avoiding global pollution.

Future Babel plans include deprecating useBuiltIns and the corejs option in the runtime plugin, replacing them with a unified polyfills field.

References

6to5 JavaScript Transpiler Changes Name to Babel

Babel学习系列2‑Babel设计，组成

初学 Babel 工作原理

RFC: Rethink polyfilling story