Babel插件 --- day02

Babel是一个编译器，编译过程分为三个阶段：解析、转换 和 打印输出。

如果想要 Babel 做一些实际的工作，就需要为其添加插件  或者 以 preset 的形式启用一组插件；

启用单个插件

转换插件：  用于转化你的代码

　　　　　转化插件将启用相应的语法插件 （不必同时指定这两种插件）

　　　用法： 参考  https://www.babeljs.cn/docs/babel-plugin-transform-exponentiation-operator

　　　　　　安装：   npm install --save-dev @babel/plugin-transform-exponentiation-operator

　　　　　　配置文件（建议）：  { "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"] }); 

 

语法插件：

　　只parse解析特定类型的语法，而不转换；

　　如果指定了转换插件，没必要指定语法插件（转换插件自动启用相应语法插件）

　　Babel 解析器传递任何 plugins 参数 ：  ----->  .babelrc  文件

　　　　{

　　　　　　"parserOpts": {   // 解析选项

　　　　　　　　 "plugins": ["jsx", "flow"]

　　　　　　}

　　 }

插件/Preset 路径

　　{ "plugins": ["babel-plugin-myPlugin"] }

插件的短名称

　　如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：

　　{ "plugins": [ "myPlugin", "babel-plugin-myPlugin" // 两个插件实际是同一个 ] }

　　{ "plugins": [ "@org/babel-plugin-name", "@org/name" // 两个插件实际是同一个 ] }

插件顺序

　　处理同一段代码，根据插件顺序依次执行。

• 插件在 Presets 前运行。
• 插件顺序从前往后排列。
• Preset 顺序是颠倒的（从后往前）。

插件参数

　　插件名和参数对象组成一个数组

　　不指定参数，下面几种是一样的：

　　　　{ "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]] } 

　　指定参数，参数对象（参数名作为键 key )

　　　　{ "plugins": [ [ "transform-async-to-module-method", { "module": "bluebird", "method": "coroutine" } ] ] }   ---> 启用插件

　　　　{ "presets": [ [ "env", { "loose": true, "modules": false } ] ] }   ---> 启用查件组 presets

　　---- 可以看出每个插件都是一个数组， 数组的第一项为 插件名； 第二项 为  此插件参数（参数名 为参数对象的key）；