Babel configuration presets, plugins, meaning all stages of stage

What is Babel

Babel official document: https://babeljs.io/

Babel Chinese document: https: //www.babeljs.cn/

We know that each browser are different versions of JavaScript support, many new grammar can not be run directly in the browser, in order to solve this "miscommunication" problem, so there is Babel, Babel is mainly used in the ECMAScript 2015 + version of the code into backward-compatible JavaScript syntax to be able to run in the current and older versions of browsers or other environments. With Babel, we can do anything of use ES6 + syntax.

How to configure babel

// .babelrc文件
{
    "presets": [
        "es2015"，
        "react",
        "stage-0"
    ],
    "plugins": []
}

This configuration file is made of a series of modular for babel6, babel6, unlike babel5 as all the contents are loaded.

For example, to compile es6, we need to set the presets include "es2015", that is pre-loaded es6 compiled modules;

If you need to compile jsx, we need to set the presets include "react", that is pre-loaded react compiled modules;

presets meanings : By default, i.e., a predetermined set of inserts, insert combination babel

The execution order of presets and plugins coexist

1. plugins run before presets;

2. plugins CI, execution order of statements, from a first to a last;

3. presets configuration items, according to a statement in reverse order execution, (primarily to ensure backward compatibility) from last to first

-the X-Stage : proposal refers to the language in some stage of js

Stage 0 - imagine (Strawman): Just an idea, Babel may have plug-ins.
Stage 1 - recommended (Proposal): This is a worthy follow-up.
Stage 2 - Draft (Draft): initial specification.
Stage 3 - Candidate (Candidate): complete specification and initially implemented on the browser.
Stage 4 - complete (Finished): will be added to the next release of the year.

stage-x parameter list, refer to: https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

!!! babel7 some of the changes:

babel7 delete preset "stage-x" of;

Recommended env, instead of es2015, es2016, es2017 default

For more details, please refer to https://www.babeljs.cn/blog/2018/08/27/7.0.0

Babel configuration presets, plugins, meaning all stages of stage

Guess you like