测试必学(探秘大厂全链路质量保障体系)

download:测试必学:探秘大厂全链路质量保障体系 创建插件入口文件 —— index.ts 下面,我们来创建插件入口文件 —— index.ts。
vite 的插件支持 ts,所以这里我们直接使用 typescript 来编写这个插件。
该文件的内容主要是包含了 name、enforce、transform 三个属性。
【测试必学(探秘大厂全链路质量保障体系)】name: 插件名称;
enforce: 该插件在 plugin-vue 插件之前执行,这样就可以直接解析到原模板文件;
transform: 代码转译,这个函数的功能类似于 webpack 的 loader。

export default function markdownPlugin(): Plugin { return { // 插件名称 name: 'vite:markdown',// 该插件在 plugin-vue 插件之前执行,这样就可以直接解析到原模板文件 enforce: 'pre',// 代码转译,这个函数的功能类似于 `webpack` 的 `loader` transform(code, id, opt) {} } }module.exports = markdownPlugin markdownPlugin['default'] = markdownPlugin

过滤非目标文件 接下来,我们要对文件进行过滤,将非 vue 文件、未使用 g-markdown 标签的 vue 文件进行过滤,不做转换。
transform 函数的开头,加入下面这行正则代码进行判断即可。
const vueRE = /\.vue$/; const markdownRE = /\/g; if (!vueRE.test(id) || !markdownRE.test(code)) return code;

    推荐阅读