How to use hammer.js plugins with require.js

Question

I am trying to use hammer.js plugins with require.js but I have no luck.

Here is my code:

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(); } }); }); 

And here is the error:

Uncaught TypeError: Unable to read "plugins" of undefined properties hammer.showtouches.js: 7

Uncaught TypeError: Unable to read property plugins of undefined require.js: 8

Uncaught TypeError: Unable to read "plugins" of undefined properties hammer.fakemultitouch.js: 7

Uncaught TypeError: Unable to read property plugins of undefined require.js: 8

I tried to include Hammer in the shim configuration with no luck (not necessarily beacause the latest version of jquery.hammer is compatible with AMD).

Answer 1

Your problem is that you did not include the hammerjs library, which is required by the hammerjs jquery plugin.

To fix this problem, you need to add something like 'hammer':'lib/hammerjs/dist/hammer.min', to your requirejs path 'hammer':'lib/hammerjs/dist/hammer.min',

---

In addition, here is some related information on how I used hammerjs with requirejs .

In my case, I wanted it to work with backbone and requirejs . I installed the libraries using bower .

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

Then I started adding RequireJS configuration:

• I noticed that jquery.hammer.js is AMD and automatically requires jquery. He is also quietly dependent on Hammer. It modifies jquery to support Hammer. No gasket.

• I noticed that hammerjs is AMD and automatically exports Hammer. No gasket.

• I noticed that backbone.hammer is AMD and automatically requires underscore , backbone and hammer . It modifies the base station to support Hammer. No gasket.

Therefore, my configuration uses only paths (since laying support is not required):

 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

Wrap HammerJS is then anchored to the global window:

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

Then make all plugins or modules that have HammerJS dependencies dependent on utils/hammer .