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里的依赖进行替换而已。

解决方案

恍然大悟，咱们意识到在CommonJS下引入的依赖名应该为react-dom，而非浏览器环境下注入在全局变量里的ReactDOM，：故只须要千方百计将打包好的文件头部里对CommonJS环境下的依赖名进行修改成react-dom便可。

深刻理解externals

聪明的webpack早已经帮咱们想好了这点，接下来咱们经过深刻externals参数来解决此问题。

咱们一般状况下配置的externals参数为字符串格式，其表达的意思为在全局变量里查找此变量，例如以下配置表明使用window.jQuery。

{
    jquery:'jQuery'
}

为了支持不一样环境下，使用不一样的依赖，externals提供了object格式的配置，例如以下配置表名了在全局变量环境下使用ReactDOM变量，在其余环境下使用react-dom对象