Webpack构建library时的踩坑经历

205 阅读3分钟
原文链接: click.aliyun.com

背景

随着组件化、模块化意识地不断增强,越来越多同学开始构建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格式化后的了,表明其可以在BrowserAMDCommonJS环境下均可以使用,并且观察到ReactreactDOM依赖是直接引用进来的,说明打包时的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了。

参考资料