2

On the plugin's github page there is the following explanation to implement the plugin via AMD loader:

define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) {
  $(document).ready(function() {
    $(".panzoom-elements").panzoom();
  });
});

But how do I implement this plugin via nodejs & browserify?

Empi
  • 94
  • 1
  • 9

1 Answers1

2

This plugin uses UMD (Universal Module Definition) pattern, meaning you could use it also with CommonJS/Browserify module system as usual like any other lib/package.

(See: these lines of source code).

Installation:

npm install jquery.panzoom --save

Usage:

main.js

var $ = require('jquery');
require('jquery.panzoom');

$(document).ready(function() {
  $(".panzoom-elements").panzoom();
});

Browserify:

browserify main.js -o bundle.js
dNitro
  • 5,145
  • 2
  • 20
  • 45
  • Well, I copy pasted this code and it worked! I don't fully get it though. What I first did was: "var panzoom = require('jquery.panzoom');". That gave the error: "panzoom is not a function". Apparantly that DOES work because of the $ require before the panzoom require. I can do jQuery stuff on my files because I included jQuery via HTML script, so I don't get why I HAVE to require it in JS in order for this to work. The $ object is global.. – Empi Jan 30 '17 at 15:41
  • As a browserify best practice always remember to Include all dependencies in every module you need it in. Here we need `jQuery` and `Panzoom` so included both. – dNitro Jan 30 '17 at 16:45
  • I just don't get why it doesn't recognise my jQuery included in the HTML, I can do jQuery stuff in all my files. Now jQuery is also included in my app.js so it's unnecessary bandwidth :) – Empi Jan 31 '17 at 09:09
  • What is `Browserify` ? – Hasani Nov 23 '19 at 19:59