DOCSEARCHbyAlgolia
Submit Docs

Babel v6 Documentation

website·Indexed 43 days ago

https://v6.babeljs.io

Documentation and release notes for Babel v6, a JavaScript compiler. This version includes details on modularization, opt-in plugins, and presets such as babel-preset-env, preset-react, and preset-flow. It covers the transition from 6to5, the introduction of Babel 6, and the eventual roadmap and upgrade path to Babel 7, including the move to scoped packages (@babel/x).

Tokens
59.9K
Snippets
678
Records
761
Agent score
64%

What's inside Babel

  2. Overview of transform-es2015-modules-commonjs

    This plugin transforms ES2015 modules (ESM) into CommonJS (CJS) modules. In Babel 6, the behavior was changed to stop automatically performing module.exports = exports['default']. If you need to maintain backward compatibility for users who do not use ES modules (so they don't have to use require("your-module").default), it is recommended to use babel-plugin-add-module-exports.
    // Input
export default 42;

// Output
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 42;

  3. Overview of Babili (babel-minify)

    Babili (also known as babel-minify) is an ES2015+ aware minifier that leverages the Babel toolchain and the Babylon parser. Because it is built on Babel, it automatically stays updated with ECMAScript standards and browser requirements. It is designed to be modular, allowing each minification step to be implemented as a separate plugin, which enables custom transforms for React, Flow, or TypeScript annotations.

  4. Overview of babel-preset-stage-2

    The babel-preset-stage-2 preset enables JavaScript features that are in the 'Draft' stage of the TC39 process. This means a first version of the specification exists and inclusion in the standard is likely. It includes all plugins from preset-stage-3 as well as the following specific plugins:

    • syntax-dynamic-import
    • transform-class-properties
    • transform-decorators (Note: this is disabled pending proposal updates; users can use the legacy transform instead).

  5. Overview of transform-es2015-modules-umd

    The babel-plugin-transform-es2015-modules-umd plugin transforms ES2015 modules into the Universal Module Definition (UMD) format. This allows the resulting code to work in environments that support AMD, CommonJS, or global variables in the browser.
    // Input
export default 42;

// Output (simplified)
(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = { exports: {} };
    factory(mod.exports);
    global.actual = mod.exports;
  }
})(this, function (exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.default = 42;
});

  6. Overview of Babili (babel-minify)

    Babili (also known as babel-minify) is a minifier built using the Babel toolchain. Unlike traditional minifiers (like UglifyJS) that are often limited to ES5, Babili is ES2015+ aware. This allows it to minify modern JavaScript code without requiring it to be transpiled to ES5 first, preserving modern syntax (like classes) and enabling ES2015+ specific optimizations.

  7. Overview of supplementary Babel packages

    Babel provides several utility packages to support AST manipulation and compilation:

    • Babel-types: A utility library for AST nodes (similar to Lodash).
    • Babel-register: A require hook that automatically compiles files on the fly in Node.js.
    • Babel-template: Used to generate an AST from a string template.
    • Babel-helpers: A collection of helper functions used by Babel transforms.
    • Babel-code-frame: Used to generate error messages with code frames pointing to specific source locations.
    • Babylon: The JavaScript parser used by Babel.

  8. Overview of babel-plugin-transform-flow-comments

    The babel-plugin-transform-flow-comments plugin serves as an alternative to babel-plugin-flow-strip-types. Instead of completely removing Flow types, it transforms them into comments, which preserves the /* @flow */ directive and allows the code to remain compatible with Flow while being valid JavaScript.

  9. Understand minify-guarded-expressions transformation

    The minify-guarded-expressions plugin simplifies guarded expressions. For example, it converts !x && foo() to x || foo() and removes unnecessary constructor calls in falsy guards, such as converting alert(0 && new Foo()) to alert(0).
    // Input
!x && foo();
alert(0 && new Foo());

// Output
x || foo();
alert(0);

  10. Statically replace NODE_ENV expressions with transform-node-env-inline

    The transform-node-env-inline plugin statically evaluates expressions involving process.env.NODE_ENV (e.g., process.env.NODE_ENV === "development") and replaces them with their boolean or string result during the Babel transformation process. This allows dead-code elimination in production builds.
    // Input
process.env.NODE_ENV === "development";
process.env.NODE_ENV === "production";

// Output when run with NODE_ENV=development
true;
false;

  11. Transform ES2015 spread syntax using babel-plugin-transform-es2015-spread

    The babel-plugin-transform-es2015-spread plugin converts ES2015 spread operators (e.g., [...a, 'foo']) into a compatible format using [].concat(). This ensures that spread syntax works in environments that do not natively support it.
    // In
var a = ['a', 'b', 'c'];
var b = [...a, 'foo'];

// Out
var a = [ 'a', 'b', 'c' ];
var b = [].concat(a, [ 'foo' ]);

  12. Minify boolean literals using babel-plugin-transform-minify-booleans

    The transform-minify-booleans plugin minifies JavaScript boolean literals by replacing true with !0 and false with !1 to reduce the overall size of the output code.
    // In
true;
false;

// Out
!0;
!1;