背景
随着组件化、模块化意识地不断增强,越来越多同学开始构建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
的确是设置过的,