vite打包类库的时候,总包和子包区分打包,怎么打包出来的都是总包的内容

作者在博客中分享了如何使用Vite打包组件库,实现既能批量引用总包,又能按需引用单个组件的目标。问题在于子包内容在打包后仍然与总包相同。通过研究Vite的官方API,作者发现需要配置`optimizeDeps.entries`以确保子包入口生效,避免了`build.rollupOptions.input`的误用。最终,通过正确配置,成功实现了组件库的按需加载和独立部署。
摘要由CSDN通过智能技术生成

需求

作者想打包一个组件库,输出可按需加载的总包的同时,并希望将每个组件进行打包输出,这样的话

1、可以批量或按需引用总包
2、也可以引用个别组件,无需引用总包,使得每个组件都可以单独运行,独立使用、独立部署

问题

在lib入口这里明明区分了不同的入口,但是打包到文件,所有的子包内容却依然是总包的,有种被覆盖了,或者是入口没有生效,还是默认走了全量打包并输出到了各个子包里

以下是伪代码,其实分了两个build进行分别处理且入口不同

// 各个子组件独立输出构建
 lib: {
  entry: 子入口,
  name: "muiDesign" + name.replace(/^\S/, (s) => s.toUpperCase()),
  fileName: "index",
  formats: ["es", "umd"],
 }
// 总量打包构建
 lib: {
  entry: 总量入口,
  name: "muiDesign",
  fileName: "mui-design",
  formats: ["es", "umd"],
 }

解决

终于是找到了官网api

官网说:
默认情况下,Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input,Vite 将转而去抓取这些入口点。

也就说lib的entry虽然说是必填的,但是感觉是有问题,总量构建其实好的,但是子包构建就没有走lib的entry

这里我确实没有设置build.rollupOptions.input,因为我觉得已经有lib的entry了

好吧,我也不用input来指定了,我直接使用了optimizeDeps.entries来指定抓取入口 === lib的entry一样的路径即可

vite打包优点: 1. 快速启动:vite使用ESM(ES Module)原生的导入机制,避免了传统打包工具需要在打包前分析整个项目依赖的过程,因此启动速度更快。 2. 热更新:vite支持HMR(Hot Module Replacement)热更新,可以快速查看修改后的效果,提高开发效率。 3. 零配置:vite默认配置适合大多数应用程序,无需手动配置即可快速构建项目。 4. 更少的依赖:vite的依赖更少,占用更小的磁盘空间和运行内存。 5. 支持多种框架:vite支持多框架,Vue、React等。 vite打包缺点: 1. 对于大型项目,vite的启动速度可能会比较慢。 2. 在某些情况下,vite的HMR功能可能会出现一些问题。 webpack打包优点: 1. 支持多种模块化规范:webpack支持多种模块化规范,括CommonJS、AMD、ESM等。 2. 生态丰富:webpack生态丰富,有大量的插件和loader可以使用,扩展性强。 3. 支持代码分割:webpack支持代码分割,可以将代码分割成多个小块,提高页面加载速度。 4. 支持多种文件类型:webpack支持处理多种文件类型,括JavaScript、CSS、图片等。 5. 适合大型项目:webpack适合大型项目,可以处理复杂的依赖关系。 webpack打包缺点: 1. 较慢的启动速度:由于需要分析整个项目的依赖关系,webpack的启动速度较慢。 2. 配置繁琐:webpack的配置较为繁琐,需要手动配置多个loader和插件。 3. 对于小型项目,webpack的优势不明显。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值