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