需求
作者想打包一个组件库,输出可按需加载的总包的同时,并希望将每个组件进行打包输出,这样的话
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一样的路径即可