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);

  

    

  

猜你喜欢

转载自www.cnblogs.com/baota/p/12367335.html