使用 require.js 加载非 amd 模块答案

【问题标题】：Loading non amd modules with require.js使用 require.js 加载非 amd 模块
【发布时间】：2012-10-31 23:18:31
【问题描述】：

目前我正在将 require.js 用于一个有趣的副项目，我正在工作一切正常，除了一个名为 prism.js 的代码语法高亮插件。我可以看到插件正在通过 chrome 中的网络选项卡拉出，但插件没有初始化。

我不确定这是需要问题还是插件是问题所在，我想知道是否有人可以提供帮助。

这是我的 main.js：

require.config({
  // 3rd party script alias names
  paths: {
    // Core Libraries
    modernizr: "libs/modernizr",
    jquery: "libs/jquery",
    underscore: "libs/lodash",
    backbone: "libs/backbone",
    handlebars: "libs/handlebars",

    text: "libs/text",
    prism: "plugins/prism",

    templates: "../templates"
  },
  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {
    "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
    }
  }
});

// Include Specific JavaScript
require(['prism', 'modernizr', 'jquery', 'backbone', 'routers/router', 'views/AppVIew' ],
  function(Prism, Modernizr, $, Backbone, Router, App) {
    this.router = new Router();
    this.App = new App();
  }
);

【问题讨论】：

标签： javascript requirejs

【解决方案1】：

更改 shim 部分以包括 prism，并确保它导出“Prism”：

shim: {
  "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
  },
  "prism": {
      "exports": "Prism"
  }
}

【讨论】：

“垫片”后如何使用？
就像任何其他模块一样：require('prism'); 或将其作为依赖项包含在 define 的参数中。
我使用的是three.js和OrbitControls.js，OrbitControls是非AMD的。我尝试按照此处建议的设置进行操作，但无法使其正常工作。 OrbitControls 中有什么东西需要不同的设置吗？ OrbitControls 在内部使用了three.js，但我只知道这些。我收到的错误消息是“未捕获的 TypeError：THREE.OrbitControls 不是构造函数。”感谢您提供的任何帮助。

【解决方案2】：

Handlebars 和 Prism 与 AMD（异步模块定义）不兼容，因此您需要像下面这样自己shim；

requirejs.config({
    shim: {
        'backbone': {
            "deps": ["underscore", "jquery", "handlebars"],
            "exports": "Backbone"  //attaches "Backbone" to the window object
        },
        'handlebars': {
            "exports": 'Handlebars'
        },
        'prism': {
            "exports": "Prism"
        }
    }
});

您可能希望查看 require.js shim 文档站点； http://requirejs.org/docs/api.html#config-shim

希望这会有所帮助

【讨论】：

【解决方案3】：

Prism 也应该添加到shim。就像主干一样，它不符合 AMD 标准，因此必须以相同的方式声明。

【讨论】：

即使插件没有依赖关系？
是的，我的错，我认为称它为“插件”是指 jquery 插件，并且它依赖于 jquery。