jQuery plugin template ES6

jquery-plugin-template-es6.js

/**
 * jQuery plugin template by https://github.com/publicJorn
 * Features:
 * - ES6 (So, it requires a build step to transpile to ES5 for most environments)
 * - Dynamic plugin name (only supply once) so it's easy to change later
 * - Plugin factory to make it work in the browser, or with AMD / COMMONJS modules
 * - Plugin instance is saved on the selector element
 * - Default options are saved to the instance in case you need to figure out a difference between passed options
 */
(function(global, factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], function($) {
      return factory($, global, global.document);
    });
  } else if (typeof exports === "object" && exports) {
    module.exports = factory(require('jquery'), global, global.document);
  } else {
    factory(jQuery, global, global.document);
  }
})(typeof window !== 'undefined' ? window : this, function($, window, document, undefined) {
  'use strict';

  // -- Name is used to keep jQUery plugin template portable
  const pluginName = 'pluginName';

  // -- Globals (shared across all plugin instances)
  const defaultOptions = {};

  const $window = $(window);
  const $document = $(document);

  // -- Plugin constructor
  // Using p object as placeholder, together with pluginName to make jQuery plugin template portable
  const p = {}; p[pluginName] = class {
    constructor (el, opts) {
      this.el = el;
      this.opts = $.extend({}, defaultOptions, opts) ;

      this._defaultOptions = defaultOptions;

      this.init();
    }

    init () {
      console.info('initialised');
    }
  }

  // -- Prevent multiple instantiations
  $.fn[pluginName] = function(options) {
    return this.each(function () {
      if (!$.data(this, 'plugin_'+ pluginName)) {
        $.data(this, 'plugin_'+ pluginName, new p[pluginName](this, options));
      }
    });
  };
});

Note that this requires a build step to transpile to ES5. For instance, use webpack or browserify.

There's also an ES5 version, if you intend to only use this plugin directly in the browser.

If we use this template for a jQuery plugin, then how does the client code uses our plugin when working with ES6 too?

Will this work (assuming the plugin is published to NPM with the name jquery-plugin-name):

// client code using plugin.
import $ from "jquery";
import "jquery-plugin-name";

$('.some-class'). pluginName(); // Will it work?

?

Thank you!