本教程旨在解决遗留应用现代化过程中，如何利用webpack将传统上手动管理并全局依赖的javascript库（如jquery、moment.js）打包，并使其在全局范围内可用，从而实现依赖的现代化管理，同时避免大规模重写现有代码的挑战。文章将提供详细的步骤和代码示例，帮助开发者在不破坏原有代码结构的前提下，引入现代化的包管理机制。
在软件开发实践中，遗留系统（Legacy Systems）的维护与现代化改造是常见挑战。尤其对于那些早期构建的Web应用，它们往往直接依赖于全局变量形式暴露的JavaScript库（如jQuery、Underscore.js、Moment.js等）。随着项目发展，手动管理这些库的版本和依赖变得愈发困难。本文将详细介绍如何利用现代模块打包工具Webpack，在不重写大量遗留代码的前提下，将这些库通过npm或Yarn进行管理，并确保它们能像传统方式一样在全局范围内可用。
理解挑战：遗留应用与全局依赖
许多遗留应用的代码逻辑直接假定某些库（例如$、_、moment）是全局可访问的。这意味着，如果简单地将这些库通过Webpack打包成模块，并按照现代ESM/CJS规范使用，遗留代码将无法识别这些全局变量，从而导致运行时错误。我们的目标是既要享受现代包管理（npm/Yarn）带来的便利，又要满足遗留代码对全局变量的依赖。
解决方案核心：Webpack与全局暴露
Webpack提供了强大的能力来控制模块的输出方式。通过在入口文件中导入所需的库，并显式地将它们挂载到全局window对象上，我们可以模拟传统方式下的全局可用性。
1. 初始化项目与安装依赖
首先，确保你的项目已初始化npm或Yarn，并且安装了Webpack及相关加载器。
# 使用npm npm init -y npm install webpack webpack-cli --save-dev npm install jquery lodash moment --save # 或使用Yarn yarn init -y yarn add webpack webpack-cli --dev yarn add jquery lodash moment
这里我们安装了jquery、lodash和moment作为示例库。
2. 创建Webpack入口文件
创建一个入口文件，例如src/dependencies.js。这个文件将负责导入所有遗留代码所需的库，并将它们暴露到全局作用域。
// src/dependencies.js
import $ from "jquery";
import _ from "lodash";
import moment from "moment";
// 将导入的库挂载到全局window对象
window.$ = $;
window._ = _;
window.moment = moment;
// 动态导入你的遗留代码
// 这一步至关重要，确保全局变量已设置完毕后才执行遗留代码
import("./yourOldCode");代码解释：
- import $ from "jquery";：这是ES模块语法，将jquery模块的默认导出赋值给局部变量$。
- window.$ = $;：将局部变量$的值赋给全局window对象的$属性。这样，在浏览器环境中，$就可以像以前一样全局访问了。对其他库（_和moment）也采取同样的操作。
- import("./yourOldCode");：这是一个动态导入（Dynamic Import）。它会异步加载并执行./yourOldCode.js模块。使用动态导入的原因是，它确保了在yourOldCode中的任何代码执行之前，window.$、window._和window.moment等全局变量已经完全设置完毕。如果直接使用静态import，Webpack可能会优化加载顺序，导致遗留代码在全局变量未完全设置前就开始执行。
3. 组织遗留代码
将你的遗留JavaScript代码放置在一个或多个文件中，例如src/yourOldCode.js。这个文件可以包含你现有的所有业务逻辑，它们将像往常一样访问全局变量。
// src/yourOldCode.js
// 假设这是你的遗留代码，它依赖于全局的 $ 和 moment
$(document).ready(function() {
console.log("jQuery is ready!", $);
$('#app').text("Hello from legacy code! Current time: " + moment().format('LLL'));
// 使用lodash
const arr = [1, 2, 3];
console.log("Using lodash:", _.map(arr, n => n * 2));
});
// 其他遗留函数或逻辑...
function someLegacyFunction() {
// ...
}4. 配置Webpack
在项目根目录下创建webpack.config.js文件，配置Webpack的入口和输出。
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', // 或 'production'
entry: './src/dependencies.js', // 入口文件指向我们创建的依赖文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出目录
publicPath: '/', // 公共路径，用于按需加载的模块
},
// 如果你的遗留代码中使用了 require() 语法，可能需要配置 resolve.alias 或 externals
// 但对于本场景，由于我们是动态导入，通常不需要额外配置
};5. 构建项目
运行Webpack命令进行打包：
npx webpack # 或 yarn webpack
这将在dist目录下生成一个bundle.js文件。
6. 在HTML中引入打包文件
最后，在你的HTML文件中引入生成的bundle.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legacy App with Webpack</title>
</head>
<body>
<div id="app"></div>
<!-- 引入Webpack打包后的文件 -->
<script src="/dist/bundle.js"></script>
</body>
</html>现在，当浏览器加载bundle.js时，它会首先设置好$、_、moment等全局变量，然后才执行你的遗留代码，从而确保一切正常运行。
注意事项与最佳实践
- 全局污染（Anti-Pattern）的认知： 将库暴露到全局作用域在现代JavaScript开发中被视为一种反模式（Anti-Pattern），因为它增加了命名冲突的风险，并使得依赖关系不明确。然而，对于遗留系统，这是一种有效的过渡策略，以最小化重写工作。
- 逐步现代化： 这种方法提供了一个起点。一旦系统稳定运行，你可以考虑逐步重构遗留代码，将它们转换为模块化的形式，并移除对全局变量的依赖。
-
Webpack externals 选项： 如果你的遗留代码中某些库是外部引入的（例如通过CDN），并且你不想让Webpack打包它们，可以使用Webpack的externals配置。例如：
// webpack.config.js module.exports = { // ... externals: { jquery: 'jQuery', // 告诉Webpack，如果遇到 import $ from 'jquery'，就去查找全局的 jQuery 变量 } };但这与我们当前的需求（通过npm安装并全局暴露）略有不同。本教程的方法是先通过npm安装，然后由Webpack打包并主动暴露。
- 按需加载的挑战： 对于遗留代码中大量使用require()动态加载模块的场景，可能需要更复杂的Webpack配置，例如使用expose-loader或ProvidePlugin，但对于简单地依赖全局变量的情况，上述方法已足够。
- 性能考量： 打包所有库到一个文件可能会导致文件较大。在生产环境中，请确保启用Webpack的生产模式（mode: 'production'）以进行代码优化和压缩。
总结
通过上述步骤，我们成功地利用Webpack将遗留应用程序中对全局库的依赖进行了现代化管理。开发者现在可以通过npm或Yarn轻松更新库版本，同时保持遗留代码的正常运行，为未来可能的代码重构奠定了基础。尽管全局暴露是一种妥协，但在处理遗留系统时，它无疑是一种实用且高效的解决方案。
