如何在 require.js 中使用hammer.js 插件

Question

我正在尝试将hammer.js 插件与require.js 一起使用，但我没有运气。

这是我的代码：

requirejs.config({
  paths: {
      "jquery": ('__proto__' in {}) ? "lib/zepto" : "lib/jquery",
      "hammer-jquery": "lib/jquery.hammer",
      "hammer-showtouches": "lib/hammer.showtouches",
      "hammer-fakemultitouch": "lib/hammer.fakemultitouch"
  },
  shim: {
      "jquery": {
          exports: "$"
      },
      "hammer-showtouches": {
          deps: [ "hammer-jquery" ],
          exports: "Hammer.plugins.showTouches"
      },
      "hammer-fakemultitouch": {
          deps: [ "hammer-jquery" ],
          exports: "Hammer.plugins.fakeMultitouch"
      }
  },
  waitSeconds: 30
});

requirejs(["jquery","hammer-jquery","hammer-showtouches","hammer-fakemultitouch"], function ($,Hammer) {
    $(function(){
      if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
            Hammer.plugins.showTouches();
            Hammer.plugins.fakeMultitouch();
          }
    });
});

这是错误：

未捕获的类型错误：无法读取未定义的hammer.showtouches.js:7 的属性“插件”

Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8

未捕获的类型错误：无法读取未定义的hammer.fakemultitouch.js:7 的属性“插件”

Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8

我尝试在 shim 配置中包含 Hammer，但没有成功（没有必要，因为最新版本的 jquery.hammer 与 AMD 兼容）。

Answer 1

您的问题似乎是您没有包含hammerjs 插件必需的hammerjs 库。

要解决此问题，您需要在 requirejs 路径中添加类似 'hammer':'lib/hammerjs/dist/hammer.min', 的内容

---

此外，这里有一些关于我如何使用hammerjs 和requirejs 的相关信息。

就我而言，我希望它与backbone 和requirejs 一起工作。我使用bower 安装了这些库。

bower install --save hammerjs
bower install --save backbone.hammer

然后，我继续添加 RequireJS 配置：

• 我注意到jquery.hammer.js 是 AMD 并且自动需要 jquery。它也默默地依赖于 Hammer。它修改 jquery 以支持 Hammer。不需要垫片。

• 我注意到hammerjs 是 AMD 并自动导出 Hammer。不需要垫片。

• 我注意到 backbone.hammer 是 AMD 并且自动需要 underscore、backbone 和 hammer。它修改了 Backbone 以支持 Hammer。不需要垫片。

因此，我的配置仅使用路径（因为不需要 shim 支持）：

require.config({
    'baseUrl':'',
    'paths':{
        'underscore':'js/lib/underscore-amd/underscore-min',
        'backbone':'js/lib/backbone-amd/backbone-min',
        'jquery':'js/lib/jquery/jquery.min',
        'hammer':'js/lib/hammerjs/dist/hammer.min',
        'jquery-hammer':'js/lib/hammerjs/dist/jquery.hammer.min',
        'backbone-hammer':'js/lib/backbone.hammer/backbone.hammer'
    },
    shim:{
        'underscore': { exports: '_' },
        'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }
    }
});

Answer 2

包裹 HammerJS 然后绑定到全局窗口：

// @path utils/hammer
define([
  'hammer'
], function (Hammer) {
  window.Hammer = Hammer;
});

然后让任何依赖于 HammerJS 的插件或模块依赖于utils/hammer。