【Vite 实践】Vite 库模式能满足你吗？或许你需要统一构建

2022 年本人投入了 Vite 的怀抱，开始参与到 Vite 社区中，陆续开发了一些插件。

Vite 秉承了开箱即用，简化配置的思路，确实显著提升了前端开发体验。

但是在类库模式的构建上却有所欠缺，只能处理单个输入和单输入出的情况，构建场景单一，Vite 社区上目前也没有可直接使用的工具，所以才有了开发一个统一构建插件的想法。

目前 vite-plugin-build 插件已可以直接使用，也录入了 Vite 官方 awesome-vite，希望也刚好能满足一些人的需要。

什么是统一构建？

因为没有特别好的叫法，本人暂且把这叫做统一构建，本人把统一构建归纳为如下构建：

• Bundle 构建即 Vite（也是 Rollup）的库打包模式，单输入文件，单输出 bundle 文件，如果没有设置外部依赖（external）所有涉及的依赖包都会打包到一个 bundle 文件中。优点： 支持 umd 格式，浏览器中可作为外部依赖，不受业务代码 bundle 影响，可利用浏览器缓存机制，提高加载性能。缺点： 不支持 Tree Shaking 没有使用到的代码也会加载进来，由于打包到一个 bundle 文件，本地源码可读性差。

• 文件夹构建（文件到文件转换器，file-to-file transformer）文件夹所有的符合格式的文件（['ts', 'tsx', 'js', 'jsx', 'vue', 'svelte']）会转换为对应同名的 .js 文件，只支持 commonjs 和 es 格式。转换的时候，所有的 import 依赖包不会打包进来，根据需要转换的格式转换为 commonjs 的 require 或者 es 的 import 语法。优点： es 模式可支持 Tree Shaking，本地源码可读性高。缺点： 代码在 Webpack、Vite 这些构建工具中会和业务代码一起打包到 bundle 文件中，很难利用跨站点缓存优势。

• 生成 TypeScript 声明文件支持原生 TypeScript、Vue TypeScript 和 Svelte TypeScript 声明文件的生成（如果有其他类型的框架也可以在此拓展）。vite-plugin-build 通过 Vite 配合使用 @vitejs/plugin-react、@vitejs/plugin-vue、@sveltejs/vite-plugin-svelte 可支持上面的三种构建方式。

为什么要开发一个 Vite 统一构建插件？

理由一，Vite 构建场景单一，不支持如下场景：

• 多输入多输出（多输入多 bundle）
• 转换文件夹（文件转文件的转换方式，不打包成一个 bundle 文件）
• 生成 TypeScript 声明文件

理由二，Vite 社区缺乏可直接代替的工具。

Vite Github 上官方插件库使用的是