Babel is a compiler, compilation process is divided into three stages: parsing, conversion and printouts.
If you want to Babel to do some actual work, you need to add plug-ins or to preset enables a set of plug-ins;
Enable individual plug-ins
Conversion plug-ins: for transforming your code
Conversion plug-in will enable the appropriate syntax plug (not necessary to specify both the plug at the same time)
Usage: Reference https://www.babeljs.cn/docs/babel-plugin-transform-exponentiation-operator
安装： npm install --save-dev @babel/plugin-transform-exponentiation-operator
Profile (recommended): { "plugins": [ "@ Babel / plugin-Transform-exponentiation-operator"]}
Via CLI（通过CLI）： babel --plugins @babel/plugin-transform-exponentiation-operator script.js
Via Node API： require("@babel/core").transform("code", { plugins: ["@babel/plugin-transform-exponentiation-operator"] });
Syntax plug-ins:
Only a particular type of syntax parse parse, without conversion;
If the specified conversion plug, plug-ins do not need to specify the syntax (grammar corresponding conversion plug-in is automatically enabled plug-ins)
Babel parser pass any plugins parameters : -----> .babelrc file
{
"ParserOpts": {// parsing options
"plugins": ["jsx", "flow"]
}
}
Plug / Preset path
{ "plugins": ["babel-plugin-myPlugin"] }
Short name of the plugin
If the prefix name for the plug babel-plugin-, you can also use the short name for it:
{ "Plugins": [ "myPlugin", "Babel-plugin-myPlugin" // widget is actually two same]}
{ "Plugins": [ "@ ORG / Babel-plugin-name", "@ ORG / name" // widget is actually two same]}
Plug-order
Processing the same code, the order of sequentially performing the plug.
- Plug run before Presets.
- Plug arranged in order from front to back.
- Preset order is reversed (back to front).
Plug-in parameters
Plug-in name and an array of parameter objects
Used without parameters, the following types are the same:
{ "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]] }
Specified parameters, parameter object (parameter names as keys key)
{ "plugins": [ [ "transform-async-to-module-method", { "module": "bluebird", "method": "coroutine" } ] ] } ---> 启用插件
{ "presets": [ [ "env", { "loose": true, "modules": false } ] ] } ---> 启用查件组 presets
---- is a widget can be seen that each array, the first item in the array is a plug-in name; This is the second widget parameters (key parameter named object);