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格式化后的了,表明其可以在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了。

参考资料

目录
相关文章
|
4月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
72 0
|
2月前
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
28 1
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
38 0
|
4月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
55 3
|
5月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
72 0
|
5月前
|
缓存 前端开发 JavaScript
|
5月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
40 0
|
5月前
|
JavaScript 前端开发 Windows
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
68 1
|
5月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
87 1
|
5月前
|
JavaScript 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
150 0
下一篇
无影云桌面