Babel usage and BABELRC configuration details, want to do the front-end architecture, refused to smattering ...

Source: Internet
Author: User
Tags generator
Babel

Official Introduction: Convert ECMAScript 2015 and later JavaScript code to an older version of the browser or to a backward-compatible version of the JavaScript code in the environment.

In short, it's about converting incompatible JavaScript code into a compatible, executable JavaScript code.

Function:

 Syntax conversions

Add some compatibility Polyfill features

source code conversion, etc.

Simple Configuration preview:

{    "plugins": [],  //plug-in configuration    "presets": []   //Preset configuration}//here. BABELRC configuration of the//website is recommended in the form of module configuration, Bable.config.jsconst presets = []const plugins = []module.exports =  {presets, plugins}

  

Configuration Description:

Presets: A collection of plugin that contains all the functions of a certain class of plugins.

Plugin: Convert a code that needs to be converted into a browser to execute code.

The execution order of the compilation:

1. Execute all plugins in plugins

2, plugins plug-ins, in order to rely on the compilation

3, all plugins plug-in execution complete, in the execution presets preset.

4, Presets preset, in reverse order of execution. (from the last execution)

5, complete the compilation.

1, the main plug-in introduction

    BABEL-PRESET-ES2015 (es2015/es6 plug-in collection)

    Convert ES2015 (ES6) JavaScript code to browser-compatible JavaScript code

Arrow-functions: Arrow function

Block-scoped-functions: The way the function is named, changed to the form of the assignment

Block-scoping:let conversion to Var

Class conversion of CLASSES:ES6

Computed-properties: attribute-named conversions, such as: var obj = {[' x ' +a]: 1}

Destructuring: Transformation of destructor function

Duplicate-keys: Attribute Optimization

For-of:for of conversion

Function-name: Optimizing function naming

instanceof:instanceof Conversion

Literals: Different types of replication optimizations

New-target: Inheriting extends transformation

Object-super:super Conversion

Parameters:params, (a=1,b=2) =>{}, default parameter conversion

Shorthand-properties: Object property Conversion {A, b} = {a:a,b:b}

Spread: extended attribute Conversion {... other}

Sticky-regex:regex optimization, built with new regex

Template-literals: String Template

Typeof-symbol:symbol Conversion

Unicode-regex: convert regular match string to Unicode

    

    

BABEL-PRESET-ES2016 (ES2016/ES7 plug-in collection)

    Convert ES2016 (ES7) JavaScript code to browser-compatible code

   Exponentiation-operator: Power operation conversion x **= 3, x 3 power

  BABEL-PRESET-ES2017 (ES2017/ES8 plug-in collection)

   Convert the code for ES2017 (ES8)   

Async-to-generator: Conversion async/await to generator function

   Babel-preset-stage-x (es2018/stage plug-in collection)

   Transform the code in the stage phase

Async-generator-function: Transforming an asynchronous function

Dotall-regex: Regular optimization of the point number

Object-rest-spread: Analytic structure optimization

Optional-catch-binding:catch Plus finally optimization

Unicode-proprty-regex

    

Modules

   Modules-amd/modules-commonjs/modules-systemjs/modules-umd

    Convert different export default X to a different module form AMD/COMMONJS/SYSTEMJS/UMD

    Experiental (pilot phase)

    static property Conversion of Class-properties:class

Decorators: Adorner Conversion

Do-expressions

Export-default-from:export optimization

Export-namespace-from:export optimization

Function-bind:bind function conversion, Obj::fun = Fun.bind (obj):: Obj.fun = Obj.fun (obj)

Function-sent

Logical-assignment-operators

Nullish-coalescing-operaor

Numeric-separator

Optional-chaining

Pipeline-opertor

Throw-expressions

minification (babel-minify)

Using code compression to optimize plug-in presets

...

Here you can go to the official website to view ...

    

    Babel-preset-react (React Collection)

React related compilation conversion ...

Conversion of JSX and element

Add react presets directly to it.

  

  Other plugins

    

 JScript: Strict mode naming

Object-assgin:assgin Conversion

Transformation of Regenerator:generator function

Object-set-prototype-of-to-assign:setprototype Conversion

Runtime

2, the main presets introduction

    

@babel/preset-dev

is an intelligent preset.

Depending on the browser and operating environment, the Babel plugin and Polyfills are determined automatically.

Without any configuration, the same as babel-preset-latest (used with es2015/es2016/es2017).

{  "presets": ["Dev"]  }

  

Configuration and Explanation:

  

{"Presets": [[' @babel/preset-env ', {' target ': {"browser": ["ie>=8", "chrome>=62"],         "Node": "8.9.0", "Safari": "TP"}, "modules": false, "Debug": True, "uglify": True "Usebuiltins": true}]]}

  

Target: Describes the support/targeting environment you have configured for your project

Browsers: Browser support will return to the list of supported browsers. will be covered by target.ie.

[' Ie>=8 '] supports IE8 environment

"Default" defaults

Node: Specifies the node environment and can specify the version

Safari:safari version

Modules: Enable ES6 to other modules

Debug: Whether Console.log is enabled

Include/exclude: The plugin feature must be enabled/plugin feature not enabled

Uglify: Compression Code

Usebuiltins:

False: Refer to all Babel-polyfill and add the Babel-polyfill entry in the Webpack:

entry:[' Babel-polyfill ', ' index.js '], referencing all the Polyfill, the volume becomes larger

True: the reference section, according to the configured PRESET-ENV environment, references Polyfill,

To reference Babel-polyfill in the portal file

  @babel/preset-react

This is a collection of some react related

Do not need to introduce, there is a need to visit the official website.

    

  Stage-x

The Presets in the draft:

The plug-in collection does not exist in the Preset-env collection, so you need to reference ....

3. Babel-polyfill Compatibility method

Babel's Preset-dev only translates new Javascript syntax and does not translate new APIs.

Example: Generator/set/map, etc.

is the implementation of the Babel conversion code, there are still incompatible code conversion.

  Principle:

Babel-folyfill is the prototype of modifying a global object, adding an incompatible API method, or modifying an incompatible API method.

  

 Usage:

1. At the top of the portal file, add:

Require (' @babel-polyfill '); Import ' @babel-polyfill '

  

2. Add in Webpack

{entry:[' @babel-polyfill ', './app.js '}

Added in the Webpack configuration file.

3, directly in the HTML reference, before packaging JS files

<script src = './babel-polyfill.js ' ></script>

  

4. Transform-runtime Plug-in

 Re-convert the Babel converted code, as with Babel-polyfill, to resolve incompatible global APIs.

Unlike Babel-polyfill, it is not an Add/Modify global object.

It is a special treatment for incompatible methods, that is, adding auxiliary methods to do compatibility.

And Transform-runtime is referenced when a compatible conversion is required.

Transform-runtime are dependent on babel-runtime, and the helper methods are references Babel-runtime

  

Characteristics:

Global variables are not polluted because global objects are not modified

There are no methods to modify the instance, so some methods cannot be implemented.

["Transform-runtime", {
"Corejs": false, "helpers": false, "Polyfill": false, "regenerator": True, "ModuleName": " Babel-runtime "}]

  

Helpers: Whether to use @babel-runtime/helpers instead of internal helpers

CORESJS: Whether to replace map/set with auxiliary methods in the @babel-runtime/corejs

Polyfill: Do you want to replace polyfill with an auxiliary function that @babel-runtime

Regenerator: Whether to replace the Async/generator function with an auxiliary function

ModuleName: Reference time name

5, @babel-register

  To register all current code by @babel-register to Transcode

var fs = require (' FS '); var babelconfig = Json.parse (Fs.readfilesync ('./.BABELRC ')); require (' Babel-register ') ( Babelconfig);

  

Obviously, here you can pass in a. BABELRC configuration file for transcoding.

You only need to add it to the portal file.

Node can then implement Babel transcoding.

6. Tools

Babel-parser:babel parser for parsing code such as Javascript/jsx/typescript/flow

Babel-core:babel's core file, used to transcode the

Babel-generator: Code conversions, source code and conversion codes

Babel-code-frame: transcoding mapping for code conversion locations

Babel-helpers: Helper method

Babel-runtime: Provides a number of auxiliary methods for columns, similar to Polyfill

...

@bable/babel-cli command-line tools

For command-line compilation files, can be configured and output, and other operations.

Usage:
Babel  input.js-options//compiling input.js  files

  

Configuration:

-O: Output path

-W: Listen for compiled files, compile in real time

-S: Output Source-map, can be restrained

-D: When compiling a directory, the-D output directory

--ignore: Ignored Files

--plugins: Using plug-ins, with, separating

--presets: Using presets, with, separating

--config-file: Using the. babelrc file path

  

. BABELRC Configuration Detailed

There are three different effects of Babel configuration conversions:

  

    1, the configuration for the syntax escape. Preset-env/stage-x is mainly used for the syntax escaping of ES,

2, for the configuration of patches, that is, the configuration of Polyfill. Mainly the transform-runtime.

3, for different frame configuration, such as: react Jsx/flow, etc.

Example:
{"Presets": ["React", ["env", {...}], "stage-0"], "plugins": ["Pluginname", ["Transform-runtime", {...} ], "Ignore": ["Path", ' file '], "miniied": Boolean, "Comments": Boolean, "env": {"test": {"presets": [], "pl Ugins ": []}}, ...}

  

  

Main several configurations

Presets: Presets, collection of plugins, reverse execution

Plugins: Plug-ins, execute plugins First, execute presets, order execution

Ignore: Ignored Files

Minify: Compression Code

Common: Do I need to comment

ENV: Set different environments, apply different configurations, configure values: Babel_env, if no node_env value is taken, the default is development.

Others can browse on their own website ...

Common presets

ENV: a preset for replacing es2015/es2016/es2017. Introducing plugins to the environment

React:react Collection of Plugins

React-optimize:react code optimizations such as removal of propstype reduce production above code

Stage-x: Draft code plug-in collection

Flow:flow Plug-in collection

Minify: A collection of code optimizations

Typescript:typescript Plug-in collection

Common plugins

Transform-async-to-generator: Asynchronous function async/await Plug-in

Transform-decorators-leagacy: Decorator Plug-in

Syntax-dynamic-import:import () plug-in

Transform-runtime: Auxiliary plug-in for Ployfill

Transform-object-rest-spread: Used to combine var test = {A:1,b2};var T = {... test,n:1}

Transform-funciton-bind: for compiling obj::fun = Fun.bind (obj)

  

  

TRANSFORM-ES2015-MODULES-COMMONJS:ES6 module is used in node

   

Www.cnblogs.com/jiebba/p/9613248.html

My blog: Xiaolong's blog Blogging garden summary baba: Www.cnblogs.com/jiebba

    

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.