简介
随着组件化、模块化意识地不断增强,越来越多同学开始构建npm包来供业务复用了。问题是构建出的package在使用时,会抛出ReactDOM找不到的异常,后来通过查看构建出的源码,结合webpack打包原理,找到了解决方案。 ## 案发现场 首先,我们回顾一下案发现场。 ``` Can't resolve 'ReactDOM' in xxxx
背景
随着组件化、模块化意识地不断增强,越来越多同学开始构建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');
解决方案
恍然大悟,我们意识到在CommonJS下引入的依赖名应该为react-dom,而非浏览器环境下注入在全局变量里的ReactDOM,:故只需要想方设法将打包好的文件头部里对CommonJS环境下的依赖名进行修改为react-dom即可。