昨天看了一篇文章 【Vite 实战：手把手教你写一个 Vite 插件】，讲的是开发了一个编译markdown文件，解析为html的插件，看完之后自己记录一下啦，了解一下开发一个vite插件的书写格式。
以下的示例放在github上，可以克隆下来自己跑跑试试呀。github地址 ： vitejs-plugin-markdown
首先咱用vite先创建一个项目吧，执行【npm create vite@latest my-vue-app --template vue-ts】，这样我们就得到了一个vue+vite+ts项目。
我今天记录的也是编译markdown的示例，所以咱在项目里写一个demo.md文件，然后我们在App.vue文件里引入这个md文件，然后【npm run dev】项目启动看看。
ok，【g-markdown】没有解析，正常正常。环境已经都创建好了，下面我们开始着手搞组件了，解析这个标签，读取md文件。
1. 先搞一个插件的壳子格式，
2. 研究一下transform中各参数是啥
code：文件的源码字符串
id：文件的路径path
opt：{ssr：boolean}
ok，我们主要用到的就是code和id，也就是源码和文件，我们做一个粗糙的版本，只限制vue文件，判断id是以【.vue】结尾的，然后我就处理。
懂了懂了!!!这个方法返回的啥源码字符串，最后页面渲染的就是以这个为newSourceCode然后进行vue解析编译，渲染。
那咱这个markdown插件，核心就是在code中匹配到【<g-markdown file="./demo.md"></g-markdown>】，并获取这个file，然后借助node的path，获取md文件的字符串，再借助一个【markdown-it】这个第三方插件，将md转为html，最后来个字符串替换，然后return就好啦！
3. 完善transform，实现逻辑
3.1 匹配到 【g-markdown】这个标签，并读取到它的file属性，然后根据path、fs，读取到md文件的字符串
3.2 借助【markdown-it】，将md字符串转为html字符串
上面我们可以看到，我们已经获得了md字符串，但是浏览器是看不懂md的专属语法，所以需要借助第三方工具，编译一下。
3.3 字符串替换
将获取到的html，替换掉我们写的g-markdown标签。
4. 配置热重载
上面渲染ok了，但发现一个问题，md文件更改了，浏览器展示的内容没有更新，每次都需要重新启动。
我们需要在插件的 handleHotUpdate 钩子函数中，对我们的 md 类型文件进行监听，再将引用了该 md 文件的 vue 文件进行热重载。
好啦，到这里的话一个vite插件就结束啦，希望对大家有所帮助。
如果觉得本文对您有帮助，请帮忙在 github 上点亮 star 鼓励一下吧！
标签：md,插件,markdown,文件,vue,plugins,vite From： https://www.cnblogs.com/grow-up-up/p/17148175.html