本教程旨在解决遗留应用程序中手动管理大量库依赖的痛点，并实现这些库的现代化打包与全局可用性。我们将详细讲解如何利用webpack将jquery、moment.js等传统库打包，并通过显式挂载到`window`对象，确保它们在全局作用域中可被遗留代码访问，同时利用动态导入机制，保证遗留代码在所有全局依赖设置完成后才执行，从而在不重写代码的前提下，实现依赖管理的现代化过渡。
引言：遗留应用依赖管理的挑战
在许多企业中，存在着大量历史悠久的Web应用程序，它们通常依赖于jQuery、Moment.js、Underscore.js等经典JavaScript库。这些库可能最初是通过手动下载、复制到项目仓库，并通过<script>标签逐一引入的方式进行管理。随着时间的推移，这种手动管理方式暴露出诸多弊端：版本更新困难、依赖冲突风险高、项目臃肿且难以维护。
尽管现代前端开发推崇模块化和包管理器（如npm或Yarn），并倾向于避免全局变量，但对于缺乏资源进行大规模重构的遗留项目而言，直接引入模块化开发模式并不现实。此时，一个常见的需求是：如何在现代化构建工具的帮助下，将这些库统一管理并打包，同时确保它们仍然以全局变量的形式暴露，供现有遗留代码无缝使用？
Webpack：现代化依赖封装的利器
Webpack作为一款强大的模块打包工具，能够将各种资源（包括JavaScript、CSS、图片等）视为模块，并根据依赖关系进行打包。虽然其主要设计目标是实现模块化，但通过巧妙配置，它也能很好地服务于遗留项目，帮助我们实现库的统一管理和全局暴露。
核心策略：实现库的全局暴露
要解决遗留应用中库的全局可用性问题，核心思路是利用Webpack的入口文件，将所有必要的库导入，然后显式地将它们挂载到全局对象（通常是window）上。这样，即使这些库是通过npm安装并由Webpack打包的，它们在浏览器环境中依然表现为全局变量，供遗留代码直接调用。
以下是一个实现此策略的Webpack入口文件示例（例如，命名为dependencies.js或main.js）：
// 1. 导入所需的库
import $ from "jquery";
import _ from "lodash";
import moment from "moment";
// 2. 将导入的库显式挂载到全局作用域 (window 对象)
// 这样，遗留代码就可以通过 window.$、window._、window.moment 来访问这些库
window.$ = $;
window._ = _;
window.moment = moment;
// 3. (可选但推荐) 为了防止变量名冲突，可以为jQuery设置noConflict模式
// 如果遗留代码中存在其他库也使用了 $ 符号，这会很有用
// window.jQuery = $; // 如果需要通过jQuery名称访问
// window.$ = $.noConflict(); // 如果希望 $ 符号被其他库占用，或者避免冲突
// 4. 动态导入遗留代码，确保在全局变量设置完成后再执行
// 这将防止遗留代码在 $、_、moment 等全局变量尚未定义时尝试访问它们
import("./yourOldCode"); // 假设你的遗留代码入口文件为 yourOldCode.js在你的Webpack配置中，你需要将这个文件指定为入口点：
// webpack.config.js 示例
const path = require('path');
module.exports = {
entry: './src/dependencies.js', // 指向你创建的入口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// 其他loader和插件配置...
};然后，在你的HTML文件中，你只需引入由Webpack打包生成的bundle.js文件：
<!DOCTYPE html>
<html>
<head>
<title>Legacy App</title>
</head>
<body>
<!-- 你的遗留HTML内容 -->
<script src="./dist/bundle.js"></script>
</body>
</html>确保遗留代码的正确执行顺序
一个关键的考量是执行顺序。如果遗留代码在Webpack打包的bundle.js执行之前就尝试访问全局变量，或者在这些全局变量尚未完全设置好时就执行，就会导致运行时错误。
上述示例中的第三步 import("./yourOldCode") 正是为此目的。import() 语法是一个动态导入，它返回一个Promise。Webpack会确保在执行到这一行时，所有之前的同步代码（包括全局变量的设置）都已经完成。这意味着，当yourOldCode.js中的代码真正开始执行时，$、_、moment等全局变量已经准备就绪。
注意事项与最佳实践（过渡方案）
- 全局变量的副作用： 显式地将库挂载到window对象是一种“反模式”，因为它增加了全局作用域的污染，可能导致变量冲突和调试困难。然而，对于不具备重构条件的遗留项目，这是一种实用的过渡方案。
- 逐步重构： 尽管当前方案允许不重写代码，但理想情况下，这应被视为迈向模块化和现代化开发的第一步。未来可以逐步将遗留代码中的模块提取出来，使用ES Module或CommonJS规范进行管理，最终摆脱对全局变量的依赖。
- Webpack配置优化： 对于大型项目，可以考虑使用Webpack的externals配置来处理一些非常大的、不常更新的库，或者使用DllPlugin来预打包不经常变动的第三方库，以提高构建速度。
- 按需加载： 如果某些库只在特定页面或特定功能中使用，可以考虑将它们与对应的遗留代码一起进行动态导入，进一步优化首次加载性能。
总结
通过上述方法，我们成功地利用Webpack解决了遗留应用中库的现代化管理与全局可用性问题。通过在Webpack入口文件中导入所需库并显式挂载到window对象，结合动态导入遗留代码，我们能够在不修改现有代码逻辑的前提下，实现对传统库的统一打包和依赖管理。这为遗留项目提供了一条通往现代化构建流程的有效路径，为未来的逐步重构奠定了基础。
