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