背景
由于业务开发中,某一个业务组件的第一版本设计没考虑周全,在实际业务中的体验以及性能不是很乐观。
所以需要实现一个 v2
版本来满足咱们新的重构,至于怎么重构,一些实现细节,本文就不阐述了,会有些偏题了。
目标
- 实现多版本组件共存
- 满足多个场景下的渐进式升级
实现
我们需要准备两个纬度的配置:
- 打包纬度 ------ 确保多入口可以打包
OK
package.json
的配置 ------ 确保外部可以引入正确的声明文件
打包配置
咱们只需要配置多入口,配置打包产物的输出文件名命名,以及 type
类型的输出(如果有)。
Package.jon
我们可以重点关注下 exports
、typesVersions
两个字段的配置:
exports
保证了不同路径下的引用区分 import
和 require
的路径正确性
typesVersions
可以保证不同 typescript
版本,不同的文件路径下的声明文件引入
如图所示,完美的保证了类型以及不同入口的对象引入与导出。
小结
顺带一提的是,在 Vite
中,我们一般还需要处理 css
的引入问题, 而多入口打包如果不配置,则会有一些异常表现。
借助:https://github.com/marco-prontera/vite-plugin-css-injected-by-js,配置 relativeCSSInjection
为 true
即可。
以上便是一次在生产业务中的一次组件库多版本打包的实践,希望对你有帮助。
我是不换,我们下次再会!