关于Webpack中Shimming的若干技术疑问求助

1. 什么是Shimming？ #

Shimming（俗称“垫片”）是Webpack中用于兼容非模块化代码的处理方案。简单来说，就是给不符合ES模块/CommonJS等规范的老代码、第三方库添加一层适配逻辑，让它们能在Webpack的模块化打包环境中正常运行。

2. Shimming实际作用是什么？ #

• 适配依赖全局变量的老代码：比如直接使用$、jQuery这类全局变量的旧业务代码，不用修改源码就能在模块化项目里运行
• 补全第三方库的依赖：有些第三方库默认依赖全局环境中的特定变量（比如假设全局存在lodash），通过垫片可将局部引入的依赖映射为它需要的全局变量
• 替换或重载模块：无需修改业务代码，就能把代码中依赖的旧工具函数替换成新实现
• 环境API兼容：给旧浏览器补全Promise、Array.prototype.includes这类缺失的原生API（类似polyfill的作用，不过垫片更偏向代码依赖适配）

3. Webpack中为何需要Shimming？ #

• 大量老项目或第三方库未遵循模块化规范，直接依赖全局变量，Webpack默认仅处理模块化代码，这类代码直接打包会报错
• 部分第三方库的内部依赖逻辑是硬编码的全局变量，无法通过常规import引入，必须通过垫片来映射依赖关系
• 项目迁移时，为避免大规模重构老代码，用垫片快速适配新的模块化打包环境
• 统一依赖版本：当多个第三方库依赖不同版本的同一款工具（如lodash），可通过垫片让它们共用同一个版本，减少打包体积

4. Shimming的工作原理是什么？ #

Webpack主要通过内置插件和第三方loader来实现垫片逻辑，核心是在打包过程中修改模块的代码结构或依赖关系：

• ProvidePlugin：自动向所有模块注入指定变量，比如配置后，每个模块无需import就能直接使用$，Webpack会自动把jQuery引入并映射为$
• imports-loader：给指定模块的代码顶部添加import语句，或者将全局变量替换为局部引入的变量，比如把模块中window.$的引用替换为import $ from 'jquery'的局部变量
• exports-loader：将模块中的全局变量导出为模块化格式，比如把某个老库的全局MyOldLib导出为module.exports = MyOldLib，这样就能通过import正常引入它
• 本质是在打包的模块解析阶段，对代码做动态修改，补全或修正依赖逻辑，让非模块化代码符合Webpack的处理规则

5. Shimming的优缺点有哪些？ #

优点 #

• 低成本适配：无需大规模重构老代码或非模块化库，快速接入Webpack打包环境
• 灵活解决依赖冲突：处理模块化环境下的全局变量依赖问题，避免变量污染或找不到的报错
• 优化打包体积：通过统一依赖版本，减少重复打包的代码量

缺点 #

• 依赖关系不清晰：滥用垫片会让代码中出现无import的变量，增加代码阅读和维护难度
• 配置复杂度高：多场景下的垫片组合配置容易出错，排查问题难度大
• 潜在体积冗余：全局注入的模块若未被部分代码使用，也会被打包进产物，增加不必要的体积
• 阻碍模块化迁移：长期依赖垫片会延缓项目向标准模块化架构升级，不利于代码长期维护

内容的提问来源于stack exchange，提问作者Dhruv Parmar