制作 react 组件 npm 包，采取导出源文件(jsx 语法)和 bundle 文件各有什么优缺点？

[vevlins]

现在老板要求通过 npm 包的形式实现组件化，因为组件会在两个项目内使用。

导出 jsx，跟整个项目一起过 webpack。

• 多人协作下依赖管理比较混乱
• 用一套 webpack，单个组件灵活性低

导出 bundle

• 体积会不会相比直接导出 jsx 更大呢，external react 之后一个 helloworld 级别的组件都 20k，这是 webpack 打包之后的正常水准吗？

[yyfearth]

这里 webpack 坑比较多 我现在都是不用打包的组件 直接引用源代码 基本上就是你第一种方法

导出 bundle 其实也可以 但是你 external react 是不够的 要 external 所有的 依赖 除非你 100% 确定这个依赖是你这个组件独有的
external 所有依赖后 bundle 文件就比较小了 而且不用担心 因为整个项目的 webpack 会把依赖打包进去
否则同一个依赖 如果其他地方有用到 会被打包多次 造成文件非常大

另外如果项目的多个组件用了不同版本的依赖 多个版本会被打包起来 导致最终 bundle 非常大
最容易碰到的例子就是 lodash 和 moment 两个库 本身就挺大的 加上不同组件及其依赖使用了不同版本或者不同发布方式的版本
比如 lodash 有 cjs 版本 es 版本 模块化的 cjs 版本 模块独立的发布的 cjs 版本 而且每种还可能有不同的 version 我之前就遇到过一个项目里面 lodash 就 4-5 个不同的拷贝被打包 每个 10k - 90k 不等
然后是 moment 的 locale 需要在打包的时候排除 否则非常大
这个可以通过修改 webpack 的配置来统一版本

我接触过的一个项目 一开始每个组件自己 bundle 然后项目再 bundle 结果各种重复打包 一个简单的 webapp 可以到 10M 的 JS bundle
通过各种办法 在没有减少任何功能 组件 和 依赖的情况下 减少到 250K JS + 100K CSS + 80K 字体文件

[yyfearth]

另外 我之所以最后选择第一种方法的主要原因 是因为方便开发和 debug
因为在开发项目的时候 经常要对 npm 包里面的组件进行修改 和 debug
导出 bundle 虽然可以用 source map 来 debug 但是没办法直接修改代码 立即 debug
必须 修改组件代码 -> 打包发布 -> 主项目 npm i 新版本 -> debug -> 修改组件代码 -> ...
非常耗时和浪费精力

改用直接使用 jsx 源代码 然后 npm link 或者 yarn workspace
一切就和没有 npm 包组件化一样方便了

[vevlins]

@yyfearth 还有一事想要请教下您。现在开发的时候有一个很困扰的地方，A 组件引用了 B 组件，B 组件引用了 C 组件，在开发过程中往往由于兼容性等问题进行很多次调试，并且有的问题组件内看不出来，要在外层组件进行测试才能发现，这样引起了频繁的修改。通过 npm link 应该是有帮助的，但是因为多人协作，这种方法也比较无力。你们开发的时候有遇到过这样的问题吗？通过自动化脚本实现还是什么其他方案