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

Vite 实战：手把手教你写一个 Vite 插件

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

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

1. Vite + Vue3 初体验 —— Vite 篇
2. Vite + Vue3 初体验 —— Vue3 篇
3. 本系列文件还对 Vite 源码进行了解读，往期文章能够看这里：
5. Vite 源码解读系列（图文联合）—— 本地开发服务器篇
6. Vite 源码解读系列（图文联合）—— 构建篇
7. 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 中，咱们先不必焦急设置入口文件，咱们能够先把咱们的 性能 实现。