用 require.js 加载 spin.js答案

【问题标题】：Loading spin.js with require.js用 require.js 加载 spin.js
【发布时间】：2016-04-21 04:49:15
【问题描述】：

我最近启动了一个 Javascript 项目，现在我将其移至 require.js。到目前为止，除了spin.js 库之外，一切都运行良好。当我尝试访问与 spin.js 相关的任何内容时，我收到以下错误消息：

Uncaught ReferenceError: Spinner is not defined

我的requirejs.config 看起来像这样：

requirejs.config({

    baseUrl: 'js',

        paths: {
            'jquery': 'lib/jquery',
            'spin': 'lib/spin',
    },

    shim: {
        'jquery' : {
            deps: [],
        },

        'spin' : {
            deps: [],
            exports: 'Spinner'
        },
    }
});

示例模块如下所示：

require(['spin'], 
    function(Spinner)
    {   
        new Spinner();
    }
);

我正在使用shim config，因为我还有其他一些具有依赖关系的模块。不过，其他一切似乎都加载得很好。我在这里错过了什么？

编辑：

正如 Alex 指出的那样，我的图书馆收录是错误的。对于在理解backbone.js和require.js有困难的人，我建议this book，尤其是关于模块化开发的章节。

【问题讨论】：

标签： javascript requirejs spin.js

【解决方案1】：

不应在您的配置中填充自旋库。来自 spin.js 源代码：

  if (typeof define == 'function' && define.amd)
    define(function() { return Spinner })
  else
    window.Spinner = Spinner

这里最后已经定义为一个模块，window.Spinner 没有被创建为一个窗口对象（这就是为什么它不应该被填充）

【讨论】：

这意味着只在路径属性中指定 spin.js 并在模块依赖项中保留对它的引用就足够了，对吧（即删除 shim 属性中的“旋转”部分）？因为我也试过了，它也不起作用。
它需要在您的应用程序中定义。试试看：define(['spin'], function(Spinner){ var mySpinner = new Spinner().spin(); } );
@Jazzturtle 将 mySpinner 插入到您需要添加类似以下内容的页面中：var target = document.getElementById('foo'); target.appendChild(mySpinner.el);
谢谢，亚历克斯。这很有帮助。不过，我还有另一个小问题（如果这应该是一个单独的线程，请告诉我）。我也在尝试使用 jquery.spin 插件，但它仍然无法正常工作。将“spin”和“jquery.spin”添加到模块的依赖项以启用对所述插件的支持是否不够？如您所见，我仍在努力理解导入库的范围。您能否建议有关此主题的任何其他资源？不幸的是，requirejs 文档在我脑海中留下了一些空白。
当然。我认为您所指的 jquery spin 插件不符合 AMD 标准（它没有定义和返回自身），因此您需要使用 jquery 和 spin.js 上的 deps 以及 lib 的导出名称来填充它你刚刚垫片。如果您想在整个代码库中使用它，请使用 define() 创建这些库的模块并返回一个包含两者的对象 - 然后通过其他地方的 require() 使用该组合模块。异步依赖有点令人困惑，需要一些练习才能掌握它。除了反复试验，您还可以查看文档、源代码和本网站。

【解决方案2】：

我有一个类似的案例。我没有添加到 shim 但忽略了在 Backbone 之后将 Spinner 添加到函数中，导致它未定义。

define([
  'jquery',
  'underscore',
  'backbone',
  'spin'
],

function($, _, Backbone, Spinner) {
  var SpinnerView = Backbone.View.extend({

    initialize: function() {

      this.loadingAnimation();
    },

【讨论】：