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

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