认识

2023年12月19日

柏拉文

越努力，越幸运

一、认识

---

仅仅使用 Vite 内置的打包能力很难满足项目日益复杂的构建需求。对于一个真实的项目构建场景来说，我们还需要考虑到模块打包之外的问题，比如路径别名(alias) 、全局变量注入和代码压缩等等。Vite 很多场景的处理逻辑与核心的打包逻辑都写到一起，一来打包器本身的代码会变得十分臃肿，二来也会对原有的核心代码产生一定的侵入性，混入很多与核心流程无关的代码，不易于后期的维护。因此 ，Vite 设计出了一套完整的插件机制，将自身的核心逻辑与插件逻辑分离，让你能按需引入插件功能，提高了 Vite 自身的可扩展性。

二、语法

---

2.1 编写语法

export default Plugin(options){
    return {
        name: 'vite-plugin-xxx',
        // hook
    }
}

2.2 配置语法

// vite.config.ts
import { myVitePlugin } from './myVitePlugin';
export default {
  plugins: [myVitePlugin({ /* 给插件传参 */ })]
}

三、调试

---

在开发调试插件的过程，推荐大家在本地装上 vite-plugin-inspect 插件，并在 Vite 中使用它:

// vite.config.ts
import inspect from 'vite-plugin-inspect';

// 返回的配置
{
  plugins: [
    // 省略其它插件
    inspect()
  ]
}

这样当你再次启动项目时，会发现多出一个调试地址:

Preview

你可以通过这个地址来查看项目中各个模块的编译结果:

Preview

点击特定的文件后，你可以看到这个模块经过各个插件处理后的中间结果，如下图所示:

Preview