背景
随着组件化、模块化意识地不断增强，越来越多同学开始构建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里的依赖进行替换而已。
解决方案
恍然大悟，我们意识到在CommonJS下引入的依赖名应该为react-dom，而非浏览器环境下注入在全局变量里的ReactDOM，：故只需要想方设法将打包好的文件头部里对CommonJS环境下的依赖名进行修改为react-dom即可。
深入理解externals
聪明的webpack早已经帮我们想好了这点，接下来我们通过深入externals参数来解决此问题。
我们通常情况下配置的externals参数为字符串格式，其表达的意思为在全局变量里查找此变量，例如如下配置代表使用window.jQuery。
{
jquery:'jQuery'
}为了支持不同环境下，使用不同的依赖，externals提供了object格式的配置，例如如下配置表名了在全局变量环境下使用ReactDOM变量，在其他环境下使用react-dom对象
{
'react-dom' : {
commonjs: "react-dom",
amd: "react-dom",
root: "ReactDOM"
}
}结合以上知识点，我们修改webpack的配置参数并且重新构建，得到的代码如下所示，可以看到，react等资源的依赖名已经被校正过来，仅仅在浏览器环境下才去使用React变量，问题也就迎刃而解了。
(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"]);
})构建library的小建议
文末，我们再来总结一下有关webpack打包library的要点。
- 明确要运行的环境，可以通过npm包安装，也可以提供cdn资源供他人使用，那么需要使用umd格式进行输出。
- 为了支持umd格式，我们需要设置webpack的libraryTarget参数为umd，它决定了构建内容的运行环境。
- externals本意为抽离出公共资源，除了默认的浏览器环境外，如果我们使用了umd格式输出，那么额外需要我们精准地控制每一种环境下的资源引入方式，故提供了对象格式的配置来支持这些场景。
libraryTarget及externals的正确使用，是构建library的基本要求，理解了它们的背后原理后，是时候构建你自己的library了。
