Webpack构建library时的踩坑经历

时间:2020-9-2 作者:admin

Webpack构建library时的踩坑经历

简介

随着组件化、模块化意识地不断增强,越来越多同学开始构建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即可。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。