How does Babel work

Babel is a tool to convert high-level code into low-level code, input high-level code text, output low-level code text.



As shown, the input is JSX code that JSX V8 cannot parse, and the output is a node created using the createElement function that can be parsed by V8. At its core, Babel provides a framework for transformations. What syntax needs to be transformed and how it needs to be transformed depends on the plugin.



The general execution process of Babel is also the process of constructing AST tree through lexical analysis and syntax analysis, modifying AST tree and converting it into string output. Babel abstracts this process into three processes: Parse, traverse, and generate. For each process, there are exposed hook functions that are provided by plugins, which implement the hook functions.

Note: Babel provides abstraction tools for high-level code to low-level code, with parse, traverse and Generator stages. It also provides specific plugins for handling specific grammars, in which hook functions are implemented to accommodate various grammars.

Note: The parse phase is the process of converting incoming and outgoing high-level syntax into an AST. In this process, the BaseParser object is created and the plugins attribute is initialized (execute the manipulateOptions hook function that introduces the pulateOptions hook function mounted from the plug-in). An AST consists of multiple units, each of which corresponds to a token, with common attributes start, end (related to sourcemap), and private attributes of their own characteristics.

Note: Traverse can traverse AST cells and then call visitor field to perform specific handler functions on specific cells (enter, exit) to handle replacement AST cells. In the process of writing plug-ins, you can use the @babel/type @babel/template package to write and process plug-in code quickly and conveniently.

All you need to know here is that Sourcemap essentially maintains a mapping between the source line and line positions of the final output code. So we need the following information: number of source code lines, number of source code columns, number of object code lines, number of object code columns.

When the source code is parsed into the AST tree, each unit maintains the start, end, and LOC information of the token, which is the position and column of the source code corresponding to the token. Although the contents of the cell may be replaced after the transform processing, the location information is still old and will not be replaced. In the process of generate converting AST into object code, the previous position information, namely the number of source code lines and source code columns, can be obtained when the AST unit is traversed, and then the output position of the next output string, namely the number of target code lines and target code columns, can be known. This gives you the mapping, and after some compression algorithms, the Sourcemap is generated.

Note: The Generator outputs the TRANSFORMED AST as object code, forming the SourcemAP from the old and new locations in the process.

So far we’ve learned where Babel is at the overall engineering level, what Babel does, how Babel works, how Babel’s integrated packages work and how they relate upstream and downstream. Ultimately, however, Babel will need to be configured in a project using a variety of plug-ins to achieve a project-appropriate configuration. Next, we’ll take a closer look at Babel in terms of several conceptual aspects to focus on at configuration time.

The plugin based

From the Babel workflow described earlier, you can get an idea of what the plugin does. Babel abstracts high-level source code into low-level source code by parsing traverse generate several abstractions, and plugin is the implementation of specific syntax transformations. Here is an example of a plug-in:

const pluginUtils = require("@babel/helper-plugin-utils");

const plugin = api= > {
    return {
        name: "plugin-demo".manipulateOptions(opts, parserOpts) {
            parserOpts.plugins.push("jsx");
        },

        visitor: {
            JSXElement: {
                exit(path, file){}}}}; };exports.default = pluginUtils.declare(plugin);
Copy the code

The plugin returns an object processed by pluginUtils. More importantly, the function passed in returns a description object that implements the key hooks in Babel abstraction. Name indicates the unique identifier of the plug-in.

Babel first converts advanced source code into AST through parse lexical and syntax analysis. In the manipulateOptions hook, Babel states in advance that JSX style syntax needs to be recognized during parse. Traverse each element in the AST. The processing is done in the visitor object, where the key of the object is the type of the processing element. Passing in the path description of the element and executing the function corresponding to the key can pass the high-level source code to the low-level implementation. It then outputs a string through generate.

Classification of language characteristics

3. other

Other prediction features are those that are not part of a standard or proposal but are used in code, such as JSX, typescript, Flow, etc. These also need to be identified and parsed at Babel compilation time, otherwise interpretation will fail.

1. syntax

Syntax plugin is just an implementation of the pulateOptions hook function. The purpose is to enable Babel to support specific syntax during parsing. As described in the Parse chapter



JSX = JSX = JSX = JSX = JSX = JSX = JSX = JSX = JSX = JSX = JSX Of course configuring syntax can be separate from the visitor implementation used on specific traverse because syntax recognition can also be done without parsing into low-level syntax form. Maybe you’re running an environment that supports JSX syntax

3. proposal

AST transformation plugins that do not include language standard features are called proposal Plugin, which is also a Transform Plugin, but is called as such to distinguish it from standard features. To complete the support for proposal features, sometimes the syntaxPlugin and proposal Plugin are also needed, such as function bind (::). Operator) requires both @babel/plugin-syntax-function-bind and @babel/plugin-proposal-function-bind.

note: Plugin is the implementation of concrete syntax transformations in the Babel abstract process, Advanced syntax can be transformed into low-level syntax through syntax Transform + API polyfill. Plugin can be divided into three categories: syntax, transform and proposal according to language characteristics and Babel abstract process.

Preset base

babel6

In Babel6 version, there are many preset types according to the language features. For example, special preset-env such as ECMA supported preset -ES2015 is always compatible with the latest standard syntax. Non-standard preset features are supported, such as preset-stage-draft, and preset-react and preset-typescript are supported for other types of features.

But progressive use of Babel6 Preset reveals some problems:

• How best to support incremental compilation in the target environment? For example, all standard presets after preset- ES2015 will be preset to low-level ES5 syntax, but the users may be the latest group of Chrome users who already support some ES2015 features, only some of the new features are not supported, but all the changes bring extra burden. I did a little bit of useless work. Therefore, incremental compilation is required based on the agent environment support that the user product faces.
• Preset packages change very frequently and are not flexible enough. Babe6 has preset- ES2015 and preset- ES2016 for specific standards, for example, PRESET – ES2015, and preset-stage-draft and preset-stage-proposal for non-standard proposal versions. However, all package references need to be changed when the syntax changes from the draft stage to the proposal stage, which is very inflexible, and even the proposal syntax used in the development process is limited to a few high frequency ones, and the introduction of all preset brings about the maintenance cost of team collaboration.

Preset – env configuration (0)

The main configuration of @babel/preset-env consists of targets, useBuiltIns, and Corejs fields, as shown in the following figure. The configuration in the presets field of the Babel configuration file:



The targets field sets the target environment version, indicating the extent to which the latest standard syntax needs to be resolved to achieve incremental compilation. It has been introduced in plugin that compilation from a high-level language to a low-level language requires syntax + API polyfill, so corejs useBuiltIns limits how polyfill can be used. For example, whether to introduce helper/polyfill functions in full or incrementally in your code. Use the new version or the old version, etc. Targets and polyfill are introduced in detail below.

• Targets value is BrowswesList query (browserslist query document), such as “last 1 version, > 1%”. This is shorthand for the previous proxy environment object. Perset-env translates query with @babel/compat-data.

1. UseBuiltIns to false

The original handling of polyfill configuration. Babelrc:

{
  "presets": [["@babel/preset-env", {
        "targets": { "chrome": 45 },
        "useBuiltIns": false // The default value is false and can be omitted.}]],"plugins": []}Copy the code

Babel SRC / -d dist/ Babel SRC / -d dist/

"use strict";

function _inherits(subClass, superClass) { if (typeofsuperClass ! = ="function"&& superClass ! = =null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true.configurable: true}});if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this.arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if(call ! = =void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect= = ="undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy= = ="function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean[],function () {})); return true; } catch (e) { return false; }}function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _classCallCheck(instance, Constructor) { if(! (instanceinstanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }}var par = function par() {
  _classCallCheck(this, par);
};

;
var sub = /*#__PURE__*/function (_par) {
  _inherits(sub, _par);

  var _super = _createSuper(sub);

  function sub() {
    _classCallCheck(this, sub);

    return _super.apply(this.arguments);
  }

  return sub;
}(par);

;
new Array(5).fill('1');
Array.from([]);
Copy the code

You’ll notice that the first 17 lines of code are designed to support helper functions for the class syntax, and that neither fill nor from adds polyfill, which would be an error on Chrome 45.

Advantages: Targets intelligently parse syntax. Preset -env can be parsed based on the targets intelligence syntax. Disadvantages: No API polyfill processing. Only plugin of syntax type is added, that is to say, only compatibility processing is carried out in the transformation process of advanced syntax, that is to say, advanced syntax can be converted into low-level syntax through syntax transform + API polyfill. But here only the Syntax Transform action is done, and API polyfill is not handled.

3. UseBuiltIns for usage

Handle polyfill configuration. Babelrc:

{
  "presets": [["@babel/preset-env", {
        "targets": { "chrome": 45 },
        "useBuiltIns": "usage"."corejs": 3}]],"plugins": []}Copy the code

Introduction of SRC /index.js file swap.

"use strict";

require("core-js/modules/es.reflect.construct.js");

require("core-js/modules/es.array.from.js");

function _inherits(subClass, superClass) { if (typeofsuperClass ! = ="function"&& superClass ! = =null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true.configurable: true}});if(superClass) _setPrototypeOf(subClass, superClass); }...function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _classCallCheck(instance, Constructor) { if(! (instanceinstanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }}var par = function par() {
  _classCallCheck(this, par); }; ; . ;new Array(5).fill('1');
Array.from([]);
Copy the code

Advantages: Introduction on demand. Introduces the Core-JS polyfill of array from used in this file. The fill function for array is not added because targets is still in effect. Disadvantages: global pollution, helper function duplication. But to the core – js/modules/es. Array. From the js function back to found that the polyfill is directly in the original array add modified prototype. The same class helper function has one for each file.

babel8

Faced with the problem of targets failure left by Babel7, Babel8 has started to solve it. Specifically at github.com/babel/babel… The document is so clear that you can look directly at the official document. The configuration is available at github.com/babel/babel… In the document.

Install the babel-plugin-polyfill-corejs3 package.

{
  "presets": [["@babel/preset-env", {
        "targets": { "chrome": 45}}]],"plugins": [
    "@babel/plugin-transform-runtime"["babel-plugin-polyfill-corejs3",
      {
        "targets": { "chrome": 45 },
        "method": "usage-pure"}}]]Copy the code

​

The resulting code:

"use strict";

var _Reflect$construct = require("core-js-pure/stable/reflect/construct.js"); .function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this.arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect= = ="undefined"| |! _Reflect$construct)return false; if (_Reflect$construct.sham) return false; if (typeof Proxy= = ="function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean[],function () {})); return true; } catch (e) { return false; }}var par = function par() {(0, _classCallCheck2.default)(this, par); }; ; . ;new Array(5).fill('1');
(0, _from.default)([]);
Copy the code

The resulting code is targets compliant, helper non-repetitive, polyfill on demand volume-friendly, auto-import dependent, and non-polluting globally coded.