reactjs - 将基于 React / Preact 的小部件库集成到旧版 Web 应用程序中

Question

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

我的想法是创建：

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

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

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

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

B.将 preact 嵌入到库包中：

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

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

标签： reactjswebpackbundlepreact

Answer 1

我会倾向于B答案。

• 如果您需要将它们与其他库结合起来，您仍然拥有 ES6+ 中的源代码，这使您可以轻松地将它们导入到新项目中。

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

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