How to import hammer without using `<script>` tag

[ghost]

I'm using vanilla JS es6 (2015) and I'm trying to import hammer. I can't seem to find any documentation on how to use these modules instead of using the <script> tag. Is there any way to do this or is the <script> tag the only way?

[arjunkathuria]

Hammer supports Amd and requirejs styles too. see here:-

so if you're already using say require.js(which i assume you are not) in your page, you could var Hammer = require(['hammer.js']);

if you want to use \ import hammer as an ES6 module, the current distributed file is transpiled to ES5, so that wont really work.

Tl;DR:- for now, go with the script tag.

[ghost]

Thanks for the confirmation @arjunkathuria. I had looked at that export definition but I was not sure about it and I couldn't find any documentation anywhere else.

I actually can do the require version, but since I didn't see it on the npm package description, and being a bit frustrated by that point on attempting various permutations of module imports with spellings of hammer/Hammer/hammerjs/hammer.js/etc, I didn't explore the require version. After your feedback, I found the following works:

var Hammer = require(['hammerjs']);

NB that your version with the . does not work! :scream: Maybe a version thing :question:

Because it's so easy to get wrong, I would recommend that you could possibly add this to your npm page, since using npm often implies avoiding the <script> route...But it's easy for me to say when I don't have to do the work! :seat: :football:

But thanks for your prompt feedback without which, I might not have gotten it going! :+1:

Btw,

Tl;DR:- for now, go with the script tag.

This had me laughing :smile:

[arjunkathuria]

@bill-mybiz Glad you got it working 😉

cc: @arschmitz @runspired guess this one's okay to close.

[BillyWM]

Just FYI if you (or anyone reading this) are actually using vanilla Javascript, then you're only using modules on Chrome for Android, and maybe Edge with a flag turned on.

Oh, and you can't get away from the script tag :)

https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/

[looeee]

Just in case anybody else finds this - actually you can use Hammer as an ES6 module.

If it's installed via NPM, use:

import * as Hammer from 'hammerjs';
window.Hammer = Hammer.default;

Thereafter, from the same file you can use Hammer as window.Hammer, and in other files you can just use Hammer.

[BillyWM]

@looeee: Again, you cannot use this feature in web browsers reliably.

Please consult the following:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

The only thing that has changed in the past 4 months is that Safari added support to a technology preview build.

You still can't use this feature on:

Chrome Firefox Internet Explorer Opera iOS Safari

And in Edge, according to that page, the feature is still behind a flag. So on those platforms you must still put this into a Githubissues.

Githubissues is a development platform for aggregating issues.