patch-vue3

patch-vue3

一个基于webpack的vue3补丁。用于将vue2相关语法转换到vue3

注意事项

• 仅兼容转换在vue3中废弃或不支持的语法

• 不支持非.vue文件中的相关语法转换

• 不支持jsx写法转换（即options API中配置的render函数）

• 不支持在beforeCreate中使用的eventBus，因为patch-vue3会将其注入到methods中，针对此类情况可自行在全局挂载

安装与使用

// 安装
npm install patch-vue3 -D
// 使用
const PatchVue3 = require('patch-vue3').default;
// 在webpack的plugins中调用
new PatchVue3(PatchVue3Options)

参数

interface PatchVue3Options {
  identifier?: {
    // ui库
    uiLib?: string;
    // render函数渲染的ui组件
    uiComponents?: string[];
    // 挂载的eventBus名称，默认值为'$bus'
    eventBus?: string;
    // 挂载的$children名称，默认值为'$children'
    mountChildren?: string;
  };
  config?: {
    // ui库的前缀，比如element的el-、iview的i-
    uiLibPrefix?:string;
    // eventBus的引用路径，默认引入路径为webpack配置的别名key+‘/util/patch’，该模块需要导出名称为bus的对象
    busImportPath?: string;
    // 是否启用别名，启用后，查找并应用webpack配置项中的第number个alias key，默认为0，指定-1关闭
    alias?: number;
    // 当非setup标签、非setup函数、非jsx render、非多根节点时，又想要sfc文件跳过本插件处理时指定，默认为refuse-patch
    skipTag?: string;
    // prettier配置文件地址，默认为根目录下的.prettierrc
    prettierrc?: string;
    // 全局过滤器，当前sfc找不到filter配置时降级使用
    globalFilters?: string[];
    // 是否校验props，默认true
    validateProps?:boolean;
    // 当某个文件被跳过时，是否输出日志，默认为false
    printWhenSkip?:boolean;
  };
  /**
   * hooks有两种调用方式
   * 当在回调函数内部访问了外部变量时需要使用对象形式（该变量必须静态）
   * e.g
   *  "patch:start":{
   *    context:{
   *     id:'spp'
   *    },
   *    callback:(id, code) => {
   *      console.log(this.id)
   *    }
   *  }
  */
  hooks?: {
    // 文件开始被处理时的回调
    "patch:start"?: (id: string, ctx: {
      getSource: () => string;
    }) => undefined | string;
    // 文件处理完成时的回调
    "patch:end"?: (id: string, code: {
      getSource: () => string;
    }) => undefined | string;
    // 处理script时的回调，必须显式调用ctx.save或ctx.giveUp方法
    "patch:scriptNode"?: (node: AstNode, ctx: ScriptCtx) => void;
    // 处理template时的回调
    "patch:templateNode"?: (node: AstNode, ctx: TemplateCtx) => void;
  };
}

interface Ctx {
  // 遍历节点
  dfs: (node: AstNode, cb: (node: Node) => void) => void;
  // 模版源码
  getSource: () => string;
  // 保存更新后的源码
  save: (code: string) => void;
  // 文件id
  id:string;
  // 传参在不同hook间使用
  inject:(data:any)=>void;
}

interface ScriptCtx & Ctx {
    // 获取某一段script code
    loadScript:(code:string,start:number,flag:[string,string])=>string;
}

interface TemplateCtx & Ctx {
  // 获取tag标签
  loadTag: (
    code: string,
    attr: string,
    config?: {
      lastIndex: number;
      tagName: string;
    }
  ) => string;
}

即将支持

• watch.key为数组时强制deep
• vNode生命周期