返回

踩坑经验分享：Webpack构建library时需要避免的雷区

前端

随着组件化、模块化意识的不断增强，越来越多的程序员开始构建 npm 包来供业务复用了。但构建出来的 package 在使用时，常常会出现 ReactDOM 找不到的异常。后续经过一番探索，结合 webpack 打包原理，终于找到了解决方案。

案发现场

首先，让我们回顾一下案发现场的惨状。

…

你会看到错误提示：

Uncaught ReferenceError: ReactDOM is not defined

这表明 ReactDOM 这个变量在当前环境中不存在，导致程序无法正常运行。

问题分析

为了解决这个问题，我们必须先找出问题的根源。

首先，我们查看构建出的源码，发现了一个问题：在构建过程中，ReactDOM 这个变量被 webpack 的 ProvidePlugin 插件替换成了一个空对象。这就意味着，在构建后的代码中，ReactDOM 这个变量实际上是不存在的。

这是因为，ProvidePlugin 插件默认情况下会将所有在 node_modules 目录下的模块都替换成一个空对象。这样做是为了避免在打包时出现循环依赖的问题。

然而，在我们的案例中，ReactDOM 这个变量并不是在 node_modules 目录下的模块，而是属于 react-dom 这个包。所以，ProvidePlugin 插件不应该替换掉 ReactDOM 这个变量。

解决方案

既然我们已经找到了问题所在，那就可以着手解决问题了。

我们可以通过以下两种方式来解决这个问题：

  1. 将 ProvidePlugin 插件的 include 选项设置为一个空数组，这样就可以让 ProvidePlugin 插件不再替换任何模块。
  2. 将 ReactDOM 这个变量添加到 ProvidePlugin 插件的 include 选项中，这样就可以让 ProvidePlugin 插件只替换 ReactDOM 这个变量。

我们选择第二种方式来解决这个问题，因为这样可以避免在构建时出现循环依赖的问题。

在修改了 ProvidePlugin 插件的配置之后，重新构建项目，问题就解决了。

总结

通过这次踩坑经历，我们总结出了以下经验：

  • 在使用 webpack 构建 npm 包时，一定要注意 ProvidePlugin 插件的配置。
  • ProvidePlugin 插件默认情况下会将所有在 node_modules 目录下的模块都替换成一个空对象。
  • 如果你的代码中使用了在 node_modules 目录下的模块，但又不想让 ProvidePlugin 插件替换掉这些模块，那么你可以在 ProvidePlugin 插件的 include 选项中指定这些模块。

我希望这篇博客文章能够帮助你避免在构建 npm 包时遇到同样的问题。