将基于 React / Preact 的小部件库集成到遗留 Web 应用程序中
Integrating React / Preact based widget library into a legacy web app
一位客户要求我构建一组可重用的组件/小部件，以集成到遗留 Web 开发中（JQuery，基于 ES5）。
我的想法是创建：
- 一个将使用 React / Preact 构建小部件的库。
- 使用ES6/TS + webpack + babel，最终转译为ES5并打包到库中。
我主要关心的是第三方库依赖项（例如 react、react-dom 或 preact…），我正在考虑采用以下两种方法之一：
一个。 将第三方库视为外部依赖项，需要使用我的小部件库的遗留应用程序必须引用该库。
- 优点：我的包没有额外的重量，这个库可以用于旧版应用程序和现代应用程序。
- 缺点：将来可能出现版本控制地狱，例如我们发布了 React 16 的库，将来，他们会混合来自另一个依赖 React 18 的库的其他小部件（也许一个可能的解决方法是修复版本并不时执行全有或全无迁移）。
乙。 将 preact 嵌入到库包中：
- 优点：仅向库包添加 3 到 4 Kb，包是自包含的。
- 缺点：我们可能无法在现代开发中使用这些组件（例如，将其与其他基于 React 的库中的其他组件组合）。
最好的方法是什么？还有其他选择吗？方法 B 有意义吗？ （之前没试过那个）。
我倾向于 B 答案。
如果您需要将它们与其他库结合使用，您仍然拥有 ES6+ 中的源代码，这使您可以轻松地将它们导入到新项目中。
我实际上只使用 B 方法，因为它消除了依赖性噩梦。你知道你使用兼容的 React 版本发布代码，并且你可以使用 babel 完全控制最终的 ES5 代码。
如果您担心超过 10kb，有很多方法可以减小大小（启用压缩，确保您使用生产包等）。
一位客户要求我构建一组可重用的组件/小部件，以集成到遗留 Web 开发中（JQuery，基于 ES5）。
我的想法是创建：
- 一个将使用 React / Preact 构建小部件的库。
- 使用ES6/TS + webpack + babel，最终转译为ES5并打包到库中。
我主要关心的是第三方库依赖项（例如 react、react-dom 或 preact…），我正在考虑采用以下两种方法之一：
一个。 将第三方库视为外部依赖项，需要使用我的小部件库的遗留应用程序必须引用该库。
- 优点：我的包没有额外的重量，这个库可以用于旧版应用程序和现代应用程序。
- 缺点：将来可能出现版本控制地狱，例如我们发布了 React 16 的库，将来，他们会混合来自另一个依赖 React 18 的库的其他小部件（也许一个可能的解决方法是修复版本并不时执行全有或全无迁移）。
乙。 将 preact 嵌入到库包中：
- 优点：仅向库包添加 3 到 4 Kb，包是自包含的。
- 缺点：我们可能无法在现代开发中使用这些组件（例如，将其与其他基于 React 的库中的其他组件组合）。
最好的方法是什么？还有其他选择吗？方法 B 有意义吗？ （之前没试过那个）。
我倾向于 B 答案。
如果您需要将它们与其他库结合使用，您仍然拥有 ES6+ 中的源代码，这使您可以轻松地将它们导入到新项目中。
我实际上只使用 B 方法，因为它消除了依赖性噩梦。你知道你使用兼容的 React 版本发布代码，并且你可以使用 babel 完全控制最终的 ES5 代码。
如果您担心超过 10kb，有很多方法可以减小大小（启用压缩，确保您使用生产包等）。