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

Question

一个客户要求我构建一组可重用的组件/小部件，以便在遗留web开发(基于JQuery，ES5 )上集成。

我的想法是创造：

• 将使用React / Preact构建小部件的库。
• 使用ES6/TS + webpack + babel，最终转到ES5并将其打包到一个库中。

我主要关注的是第三方库的依赖关系(例如，react、react dom或preact…)。，我正在考虑采取以下两种方法之一：

答：将第三方库视为外部依赖项，需要使用我的小部件库的遗留应用程序必须引用该库。

• 优点:没有额外的重量，我的包，这个库可以用于遗留应用程序和现代应用程序。
• 缺点:将来可能会出现版本化地狱，例如，我们发布了React 16的库，而在将来，它们会将依赖于React 18的其他小部件混合在一起(可能的解决办法是修复版本，并不时执行全部迁移或不迁移)。

B.将嵌入到库包中：

• 优点:只向库包添加3到4KB，包是自带的。
• 缺点:我们可能无法在现代开发中使用这些组件(例如，与其他基于react的库中的其他组件组合起来)。

什么是最好的方法？还有别的选择吗？接近B有意义吗？(以前没试过那个)。

Answer 1

我倾向于B的答案。

• 如果您需要将它们与其他库组合在一起，那么您仍然可以在ES6+中使用源代码，这使得您可以在一个新项目中轻松地导入它们。
• 实际上，我只使用B方法，因为它消除了依赖噩梦。您知道，您附带了兼容的react版本的代码，并且使用babel完全控制了最终的ES5代码。
• 如果您担心超过10 to，有许多方法可以减少大小(启用压缩，确保您使用生产包等)。