【问题标题】:Using RequireJS with legacy code将 RequireJS 与遗留代码一起使用
【发布时间】:2025-02-23 18:40:02
【问题描述】:

我正在处理一个非常大的项目,该项目使用:

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

我们现在想开始将 RequireJS 与 jQuery、BackboneJS 和 UnderscoreJS 一起用于我们从现在开始开发的所有内容,但我们没有资源来重写所有遗留 JSP 页面。我们可能有时间重写我们已经开发的 Backbone 模型和视图。

问题在于,对于我们的遗留代码(上面的 1 和 2),我们将所有 javascript 文件包含在一个巨大的文件中并传送到浏览器。这个巨大的文件必须能够与我们新的 RequireJS 模板共存,但是我怎么能例如分离大文件的某些部分,以便我可以将它们与使用 RequireJS 的模板一起使用?无需重写所有使用这部分文件的页面,也无需重复代码。

谢谢!

【问题讨论】:

标签: javascript backbone.js requirejs legacy


【解决方案1】:

我不知道我是否完全掌握了手头的问题,但我认为 RequireJS 的 shimmap 函数会帮助你。

从巨大的 javascript 文件中提取新模块中所需的部分。然后告诉 RequireJS,你巨大的 javascript 文件是这个使用 shim 的新模块的依赖项。比如:

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

Shim 文档:http://requirejs.org/docs/api.html#config-shim

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

【讨论】:

    【解决方案2】:

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

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

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

    【讨论】:

      最近更新 更多