Publishing a Plugin to npm

Publishing to npm

Modern jQuery plugins are distributed via npm. Structure your package with a UMD (Universal Module Definition) wrapper to support CommonJS, AMD, and browser globals.

Example

// UMD wrapper
(function(factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery"], factory);          // AMD
  } else if (typeof module === "object") {
    module.exports = factory(require("jquery")); // CommonJS
  } else {
    factory(jQuery);                      // Global
  }
}(function($) {
  $.fn.myPlugin = function() { /* ... */ };
  return $.fn.myPlugin;
}));

// package.json: main: "dist/jquery.myplugin.js"

JAVASCRIPT

Full Editor

Pro Tip

List jquery as a peerDependency in package.json — do not bundle it inside your plugin.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned