将 RequireJS 与遗留代码一起使用

Using RequireJS with legacy code

本文关键字：一起 代码 RequireJS      更新时间：2023-09-26

我正在处理一个非常大的项目，它使用：

  1. 包含带有脚本标记的 JavaScript 文件的旧版 JSP 页面
  2. 在没有 RequireJS 的情况下使用其他 JavaScript 模块的主干模型和视图

我们现在想开始使用 RequireJS 和 jQuery、BackboneJS 和 UnderscoreJS 来开发我们开发的所有内容，但我们没有资源来重写所有遗留的 JSP 页面。我们可能有时间重写我们已经开发的骨干模型和视图。

问题是，对于我们的遗留代码（上面的 1 和 2），我们将所有 javascript 文件包含在一个巨大的文件中并交付给浏览器。这个大文件必须能够与我们的新 RequireJS 模板共存，但是我如何才能将大文件的某些部分分开，以便我可以使用 RequireJS 将它们与模板一起使用？无需重写使用文件这部分的所有页面，也不必使用重复的代码。

谢谢！

我不知道

我是否完全掌握了手头的问题，但我认为 RequireJS 的shim或map函数会帮助你。

从巨大的javascript文件中提取新模块中所需的部分。然后告诉 RequireJS，你的巨大的 javascript 文件是这个使用填充码的新模块的依赖项。像这样：

requirejs.config({
    shim: {
        'new-module': {
            deps: ['huge-javascript-file'],
            exports: 'NewModule'
    }
});

填充程序文档：http://requirejs.org/docs/api.html#config-shim

当只有部分新代码必须使用旧的大文件时，map 函数可能很有用。查看此文档：http://requirejs.org/docs/api.html#config-map

我不认为有一种真正的方法可以实现这一点，但我通过围绕全局范围的代码定义模块"外观"来解决类似的问题。假设您的旧脚本定义了一个名为 foo 的全局变量。您可以定义 AMD 模块并从中导出该变量：

//foo.js
define(function() {
  return window.foo;
});
//bar.js
define(['foo'], function(foo) {
  //do something with foo
});

这样，您只需在每次需要使用现有全局定义代码的新段时编写单行外观，而不会破坏期望全局定义相同代码的现有代码。随着时间的推移，您可以将实际实现移动和重构到模块中，而不会破坏使用者代码。

相关文章：