Reactjs 将基于React/Preact的小部件库集成到传统web应用程序中

一个客户要求我构建一组可重用的组件/小部件，以集成到遗留web开发中（基于JQuery、ES5）

我的想法是创造：

• 使用React/Preact构建小部件的库
• 使用ES6/TS+webpack+babel，最终传输到ES5并打包到库中

我主要关心的是第三方库的依赖性（例如react、react dom或preact…），我考虑采用以下两种方法之一：

A.将第三方库视为外部依赖项，需要使用我的小部件库的传统应用程序必须引用该库

• 优点：我的包没有额外的重量，这个库可以用于传统应用和现代应用
• 缺点：将来可能会出现版本控制地狱，例如，我们为React 16发布了库，将来，他们会混合使用另一个依赖React 18的库中的其他小部件（可能的解决方法是修复版本并不时执行全有或全无迁移）

B.将preact嵌入库包：

• 优点：仅向库捆绑包添加3到4KB，该捆绑包是自包含的
• 缺点：我们可能无法在现代开发中使用这些组件（例如，与其他基于react的库中的其他组件组合）

---

最好的方法是什么？还有其他选择吗？方法B有意义吗？（以前没试过这个。）

我倾向于B答案

• 如果需要将它们与其他库组合，ES6+中仍然有源代码，这使您可以在新项目中轻松导入它们

• 我实际上只使用B方法，因为它消除了依赖性噩梦。您知道，您使用兼容的react版本发布代码，并且您可以使用babel完全控制最终的ES5代码

• 如果您担心超过10kb，有很多方法可以减小大小（启用压缩，确保使用生产包等）

---

谢谢@Chris R您在组件库中使用了哪些库？反应还是预演？标记为回答，谢谢Chris，刚刚阅读了angular 7 approach（常春藤）交付lite web组件的内容，它与您的建议非常相似（lite weight minimum bootstrap+组件）。非常感谢您的指导。您能提供刚刚阅读的文章的链接吗？供未来读者提出同样的问题。=）它是在一次关于常春藤的公开演讲（未录制）上，在angular6上得到了一个相当小的包裹，发现了这个链接：演讲者的推荐，是。。。使用angular 6+ivy tree Shacking开发web组件，您会得到一个非常小的angular脚印（10 Kb的方法），您有没有抱怨过？我们选择了选项B，通过采用这种方法，我们增加了一些额外的成本，但没有任何依赖性。