vite：记录如何手写一个plugins插件

昨天看了一篇文章【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就好啦！