吃透前端工程化，大厂级实战项目以战带练前端

download:吃透前端工程化，大厂级实战项目以战带练 Vite 实战：手把手教你写一个 Vite 插件

Vite 是一种新型的前端构建工具，能够显著提升前端开发体验。
我将会从 0 到 1 完成一个 vite:markdown 插件，该插件可以读取项目目录中的 markdown 文件并解析成 html，最终渲染到页面中。

如果你还没有使用过 Vite，那么你可以看看我的前两篇文章，我也是刚体验没两天呢。（如下）

Vite + Vue3 初体验 —— Vite 篇
Vite + Vue3 初体验 —— Vue3 篇
本系列文件还对 Vite 源码进行了解读，往期文章可以看这里：
Vite 源码解读系列（图文结合） —— 本地开发服务器篇
Vite 源码解读系列（图文结合） —— 构建篇
Vite 源码解读系列（图文结合） —— 插件篇

实现思路其实 vite 插件的实现思路就是 webpack 的 loader + plugin，我们这次要实现的 markdown 插件其实更像是 loader 的部分，但是也会利用到 vite 插件的一些钩子函数（比如热重载）。
我需要先准备一个对 markdown 文件进行转换，转换成 html 的插件，这里我使用的是 markdown-it，这是一个很流行的 markdown 解析器。
其次，我需要识别代码中的 markdown 标签，并读取标签中指定的 markdown 文件，这一步可以使用正则加上 node 的 fs 模块做到。
好，实现思路都理清了，我们现在可以来实现这个插件了。
初始化插件目录我们使用 npm init 命令来初始化插件，插件名称命名为 @vitejs/plugin-markdown。
为了方便调试，该插件目录我直接创建在我的 Vite Demo 项目中。
本次插件实战的仓库地址为 @vitejs/plugin-markdown，感兴趣的同学也可以直接下载代码来看。
【吃透前端工程化，大厂级实战项目以战带练】在 package.json 中，我们先不用着急设置入口文件，我们可以先把我们的功能实现。