在 require.js 中使用非 AMD 兼容的 javascript 模块？

发布于 2024-12-23 10:40:05 字数 515 浏览 2 评论 0原文

我使用 require.js 来帮助组织基于 Backbone.js 的应用程序。

我正在尝试找出使用与 require.js 不兼容的 AMD 第三方 javascript 库的正确方法。

有问题的库是 backbone-tastypie.js。基本上，该库所做的就是对 Backbone 的一些原型方法进行 Monkeypatch，以便为 TastyPie Django REST 框架提供更简单的支持。它通过直接操作全局命名空间中的 Backbone 对象来实现这一点。

但是，由于我使用 Backbone.js 作为 require.js 模块，因此当该库尝试访问它时它不可用。

我怎样才能在 Backbone 范围内导入这个backbone-tastypie？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱娆 2024-12-30 10:40:05

更新：我已经分叉了一个AMD兼容的backbone-tastypie，名为backbone-tastypie- amd.

虽然 sander 的解决方案可行，但每次需要主干时都执行整个嵌套的 require 操作有点烦人。

backbone-tastypie 就是所谓的“传统脚本”。您可以通过 4 种方式解决该问题。

自己制作兼容骨干的AMD。您可以通过以下两种方式之一执行此操作。选项 1 是永远不直接包含骨干——仅包含骨干-tastypie。然后修改主干 tastypie 以确保主干是必需的。

var root = this;
var 主干 = root.Backbone;
if (!Backbone && (typeof require !== '未定义')) Backbone = require('backbone').Backbone;

然而这不是很好，因为本质上它会在backbone-tastypie加载（同步）后开始下载backbone。它也没有让 requirejs 完全理解这些模块之间的关系，这就是重点，对吗？因此，让我们将backbone-tastypie 包装在define() 中：

(函数（工厂）{
        if (typeof Define === '函数' &&&define.amd) {
                //AMD。注册为匿名模块。
                定义（['主干']，工厂）；
        } 别的 {
                // 未使用 RequireJS。假设主干已加载到

使用 require.js 订购插件。这会强制按顺序加载内容（在某些方面仍然是异步的，因为它会随时下载它们，但会按正确的顺序进行评估）
```
require(["order!backbone.js", "order!backbone-tastypie.js"], function () {
     //你的代码
});
```
将backbone.js放入优先级配置。这会强制主干及其依赖项无论如何都首先加载。
将backbone-tastypie 附加到与backbone.js 相同的文件中。每次主干加载时，主干 tastypie 也会加载。哈基？是的。但这与使用 jquery 与 requireJS 的推荐方式非常相似（jquery 插件需要 jquery已加载 - 就像backbone-tastypie需要加载backbone）。

UPDATE: I have forked an AMD compatible backbone-tastypie called backbone-tastypie-amd.

While sander's solution would work, its a little annoying to do the whole nested require thing every time you want backbone.

backbone-tastypie is what is called a "traditional script". You can solve the issue in 4 ways.

Make backbone-tastypie AMD compatible yourself. You can do this in one of two ways. Option 1 would be to never include backbone directly - only backbone-tastypie. Then modify backbone tastypie to ensure backbone is required.
```
var root = this;
var Backbone = root.Backbone;
if (!Backbone && (typeof require !== 'undefined')) Backbone = require('backbone').Backbone;
```
However this isn't very nice because essentially it will start downloading backbone after backbone-tastypie has loaded (synchronous). It also doesn't give requirejs the full understanding of how these modules relate, and thats the point right? So lets wrap backbone-tastypie in a define():
```
(function (factory) {
        if (typeof define === 'function' && define.amd) {
                // AMD. Register as an anonymous module.
                define(['backbone'], factory);
        } else {
                // RequireJS isn't being used. Assume backbone is loaded in <script> tags
                factory(Backbone);
        }
}(function (Backbone) {
        //Backbone-tastypie contents
}));
```
This is by far the best option out of everything in this answer. RequireJS knows about the dependencies and it can resolve them, download them and evaluate them correctly. It's worth noting that Backbone itself loads underscore using option 1 and does not define itself as a module, which is pretty bad. You can get the AMD optimised version of backbone right here. Assuming you are using this AMD version you can now go right ahead and require backbone-tastypie in your app (either by requiring it in a define() or the actual require() function). You dont have to include backbone or underscore either, as those dependencies are resolved by requirejs.
Use the require.js ordering plugin. This forces things to load in order (still asynchronous in some respects as it downloads them whenever, but evaluates in correct order)
```
require(["order!backbone.js", "order!backbone-tastypie.js"], function () {
     //Your code
});
```
Put backbone.js in the priority config. This forces backbone and its dependencies to always load first no matter what.
Append backbone-tastypie to the same file as backbone.js. Every time backbone is loaded, so is backbone tastypie. Hacky? Yes. But this is very similar to the recommended way of using jquery with requireJS (jquery plugins need jquery to be loaded - much like backbone-tastypie needs backbone to be loaded).

回复收藏 0 原文

赏烟花じ飞满天 2024-12-30 10:40:05

假设您已正确设置路径，以下内容应适用于 RequireJS 2.1.0+。

require.config({
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore','jquery'],
      exports: 'Backbone'
    },
    'backbone-tastypie': {
      deps: ['backbone']
    }
  }
);

The following should work with RequireJS 2.1.0+ assuming you've set up the paths correctly.

require.config({
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore','jquery'],
      exports: 'Backbone'
    },
    'backbone-tastypie': {
      deps: ['backbone']
    }
  }
);

回复收藏 0 原文

陪我终i 2024-12-30 10:40:05

你可以用另一个需求包装你的需求
该插件将首先加载，然后您就可以执行您的应用程序了。

require(["myCustomTastyPiePlugin.js"], function () {
    //This callback is called after the one script finish loading.

    require(["one.js", "two.js", "three.js"], function () {
        //This callback is called after the three scripts finish loading.

        // all your code goes here...

    });
});

you can wrap your require with another require
the plugin will be loaded first, and afterwards you can do your app.

require(["myCustomTastyPiePlugin.js"], function () {
    //This callback is called after the one script finish loading.

    require(["one.js", "two.js", "three.js"], function () {
        //This callback is called after the three scripts finish loading.

        // all your code goes here...

    });
});

回复收藏 0 原文

~没有更多了~