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

Question

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

我的想法是创建：

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

我主要担心的是第三方库的依赖关系（例如，react，react-dom或preact ......），我正在考虑采用以下两种方法之一：

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

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

B中。 将preact嵌入到库包中：

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

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

Answer 1

我会倾向于 B 的答案。

• 如果您需要将它们与其他库结合使用，您仍然拥有ES6 +中的源代码，这些源代码允许您在新项目中轻松导入它们。

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

• 如果您担心超过10kb，可以采用多种方法来缩小尺寸（启用压缩，确保使用生产包等）。