Babel 预设 Preset -- day03 !!! 快速使用插件

插件的使用

  自己组合插件

  使用预设的插件    

官方 Preset    ---> 一些常用环境编写的 preset  (社区维护的,通过npm下载)

  @babel/preset-env

  @babel/preset-flow

  @babel/preset-react

  @babel/preset-typescript

创建自己的 presets

  创建一个自己的 preset,只需导出一份配置即可。

  可以是一份插件数组:

  module.exports = function() {

    return {

       plugins: [ "pluginA", "pluginB", "pluginC", ]

    };

   }

  preset 可以包含其他的 preset,以及带有参数的插件。

  module.exports = () => ({ presets: [ require("@babel/preset-env"), ], plugins: [ [require("@babel/plugin-proposal-class-properties"), { loose: true }], require("@babel/plugin-proposal-object-rest-spread"), ], });

Preset 路径

  npm,自动检查 node-modules 是否安装

    { "presets": ["babel-preset-myPreset"] }

  指向 preset 的绝对或相对路径

    { "presets": ["./myProject/myPreset"] }

Preset 的短名称 

  如果 preset 名称的前缀为 babel - preset - ,你还可以使用它的短名称     (plugin  前缀babel-plugin-, 只写它的短名称   )

  { "presets": [ "myPreset", "babel-preset-myPreset" // equivalent ] }

  { "presets": [ "@org/babel-preset-name", "@org/name" // equivalent ] }

Preset 的参数 ----> 与plugin相同

附加说明:

  Polyfills   ----> 通过引入  @babel/polyfill  来满足 Babel 功能的所有需求

Babel6 的核心是插件

(改天再写吧,  不行了。  有没有讲 babel 的视频 推荐下。。。)

 

  

  

猜你喜欢

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