vite2及其插件机制
vite2主要变化
配置选项变化：
vue特有选项、创建选项、css选项、jsx选项等别名行为变化：不再要求/开头或结尾框架无关：通过 @vitejs/plugin-vue，@vitejs/plugin-react 插件分别支持Vue，React等HMR API变化
清单格式变化
插件API重新设计Vite 使用 esbuild进行依赖预构建，将 TypeScript 转换为JavaScript，速度比tsc快。 一篇介绍 esbuild 还不错的文章
node_modules/.vite：存储缓存文件的目录，会存储预打包的依赖项或 vite 生成的某些缓存文件vite1.x 的构建服务器使用的是 koa，2.x改为使用了一个轻量库 connect，源码只有一个js文件，100多行代码????，推荐阅读了解下以中间件为核心的web框架请求处理流程。connect是 express 3.x 之前的核心，express 4.x 自己实现了 connect 的接口。
具体变化内容可以在官方文档查看。
插件机制
vite插件是什么
Vite插件是一个对象，拥有名称、创建钩子(build hook)、生成钩子(output generate hook)。
vite插件扩展自
Rollup插件接口，还有一部分独有的配置选项。接收不同的options选项，利用工厂方法模式，返回插件对象。
插件扩展了vite的能力，可以在特定的时机做不同的操作：解析用户自定义的文件输入、打包代码前转译代码、查找第三方模块等。
工作过程类似中间件的形式，接管处理属于自己的事情，否则交给下一个插件处理。
使用
enforce标签可以强制插件的执行顺序
钩子函数
config：修改vite配置
configResolved： vite配置确认
configureServer： 配置devServer
transformIndexHTML： 转换宿主页
resolveId: 自定义确认函数，定位第三方依赖
load： 自定义加载函数， 返回自定义模块内容
transform： 转换已加载的模块内容
handleHotUpdate：HMR更新时调用
开发时，vite创建一个插件容器按顺序调用各个钩子。其中比较常用的是transformIndexHTML、resolveId、load、transform。
插件开发
通常的惯例是创建一个 Vite/Rollup 插件作为一个返回实际插件对象的工厂函数。该函数可以接受允许用户自定义插件行为的选项。
eg1. 官方文档中的示例
vite core plugin的调用顺序是resolveId, load, transform。其中，
resolveId 是自定义确认方法，返回 source 表示接管，
load 返回自定义的模块内容，
transform 用于转换已加载的模块内容。
eg2. i18n组件
模板文件中添加i18n语言包
<i18n>
{
"en": {
"language": "Language",
"hello": "hello, world!"
},
"zh": {
"language": "语言",
"hello": "你好，世界！"
}
}
</i18n>复制代码会看到多了这样一个请求
同时控制台有错误信息
2. 新建插件vite-plugin-i18n.tsx，识别
i18n标签
export default {
transform(code, id) {
if (!/vue&type=i18n/.test(id)) {
return;
}
return `export default Comp => {
Comp.i18n = ${code}
}`;
},
};复制代码这个插件的作用是拦截包含vue&type=i18n的url, 并将标签包裹的内容作为模块内容导出。
作者：灰原尛哀
链接：https://juejin.cn/post/7026339764143915015