Webpack构建library时的踩坑经历

背景

随着组件化、模块化意识地不断增强，越来越多同学开始构建npm包来供业务复用了。今天收到一位同学的反馈，问题是构建出的package在使用时，会抛出ReactDOM找不到的异常，后来通过查看构建出的源码，结合webpack打包原理，找到了解决方案。

案发现场

首先，我们回顾一下案发现场。

Can't resolve 'ReactDOM' in xxxx

我们继续勘察，打开构建好的文件，源码头部如下所示：

(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("React")); else if(typeof define === 'function' && define.amd)
        define("module", ["React"], factory); else if(typeof exports === 'object')
        exports["module"] = factory(require("React")); else root["module"] = factory(root["React"]);
})

我们能够看到，头部的脚本已经是umd格式化后的了，表明其可以在Browser、AMD、CommonJS环境下均可以使用，并且观察到React及reactDOM依赖是直接引用进来的，说明打包时的externals的确是设置过的，而且设置很有可能如下：

{ 'react':'React', 'react-dom':'ReactDOM' }

打包格式和资源抽离已经做好，为什么还会出错呢？仔细观察错误，webpack报错ReactDOM依赖找不到，我们尝试将其引用的代码迁移到项目里，编写如下：

const ReactDOM = require('ReactDOM');

但是在真实业务代码里，require的不是ReactDOM，而是react-dom，只是在构建的时候，将设置为externals里的依赖进行替换而已。