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 = markdownPluginmarkdownPlugin['default'] = markdownPlugin

过滤非指标文件

接下来,咱们要对文件进行过滤,将非 vue 文件、未应用 g-markdown 标签的 vue 文件进行过滤,不做转换。

transform 函数的结尾,退出上面这行正则代码进行判断即可。

const vueRE = /\.vue$/;const markdownRE = /\<g-markdown.*\/\>/g;if (!vueRE.test(id) || !markdownRE.test(code)) return code;