疑问

  • 如何编写preset

    • 编写plugin是核心，preset只是拿着plugin和options组装一下

      书摘&心得

  • Plugin的使用

    • 如果需要传参就用数组格式，第二个元素为参数。

      Plugin的格式

      第一种是一个函数返回一个对象的格式：
      1. /**
      2. * 
      3. * @param {*} api 包含了各种 babel 的 api
      4. * @param {*} options 外面传入的参数
      5. * @param {*} dirname 目录名
      6. * @returns 
      7. */
      8. export default function(api, options, dirname) {
      9. return {
      10. // 指定继承某个插件，和当前插件的 options 合并
      11. inherits: parentPlugin,    
      12. // 用于修改 options
      13. manipulateOptions(options, parserOptions) {
      14.    options.xxx = '';
      15. },
      16. // 指定 traverse 时调用的函数
      17. visitor: {
      18.  StringLiteral(path, state) {
      19.    this.cache.set(path.node.value, 1);
      20.  }
      21. },
      22. // pre post分别在遍历前后调用
      23. pre(file) {
      24.  this.cache = new Map();
      25. },
      26. post(file) {
      27.  console.log(this.cache);
      28. }
      29. };
      30. }
      第二种格式就是直接写一个对象，这种方式用于不需要处理参数的情况

      preset的格式

      image.png

  • preset 就是对 babel 配置的一层封装

  • 当plugin较多、或者plugin的options较多时可以考虑使用
    • 所以组件库既要配置生成环境、测试环境、开发环境的多种语法转换时，是否可以考虑封装成preset？正好参数也多。

      小工具：ConfigItem

      当需要把配置抽离出去时，可以使用 @babel/core 的包提供的createConfigItem ```javascript const pluginA = createConfigItem(‘pluginA’); const presetB = createConfigItem(‘presetsB’, { options: ‘bbb’})

export default obj = { plugins: [ pluginA ], presets: [ presetB ] } } ```

顺序

  1. 先应用 plugin，再应用 preset
  2. plugin 从前到后，preset 从后到前

    名称补全规则

  • 【不变】./dir/plugin.js
  • 【不变】 /dir/plugin.js
  • 【不变】module:aa
  • aa -> babel-plugin-aa
  • @scope/mod -> @scope/babel-plugin-mod
  • @babel/aa -> @babel/plugin-aa