CODEWITHSUNDEEP
javascriptjqueryrequirejs
Scott
Scott

Reputation: 1872

RequireJS - protecting my jQuery plugins

We're implementing a large site that has a ton of tracking on it. There is one particular 3rd-party tracking company that's including jquery for their tagging.

They are calling jQuery.noConflict(true); which is removing window.$ and window.jQuery.

My site is organized using RequireJS and I've implemented the config mapping for jquery found here:

requirejs.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

I'm wondering how I can protect all of my code from this 3rd-party plugin's squashing window.jQuery.

Do I need to wrap each plugin in an AMD wrapper with something along the lines of:

require(['jquery'], function($){
     // plugin library goes here
});

Or is there some global method of doing this?

Thanks, Scott

Upvotes: 0

Views: 126

Answers (1)

jeremija
jeremija

Reputation: 2528

If you're asking about the jQuery plugins you've made, then this would be the correct solution.

If you're asking about the 3rd party plugins, you could add a shim configuration for each plugin:

requirejs.config({
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        'a-jquery-plugin': ['jquery']
    }
});

From the official docs about shim:

Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.

There is an example for jQuery plugins in the docs as well:

For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies:

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

Here are some key notes from the docs:

  • The shim config only sets up code relationships. To load modules that are part of or use shim config, a normal require/define call is needed. Setting shim by itself does not trigger code to load.
  • If it is not possible to upgrade the shimmed code to use AMD define() calls, as of RequireJS 2.1.11, the optimizer has a wrapShim build option that will try to automatically wrap the shimmed code in a define() for a build. This changes the scope of shimmed dependencies, so it is not guaranteed to always work, but, for example, for shimmed dependencies that depend on an AMD version of Backbone, it can be helpful.
  • Shim config is not supported when running AMD modules in node via RequireJS (it works for optimizer use though). Depending on the module being shimmed, it may fail in Node because Node does not have the same global environment as browsers. As of RequireJS 2.1.7, it will warn you in the console that shim config is not supported, and it may or may not work. If you wish to suppress that message, you can pass requirejs.config({ suppress: { nodeShim: true }});.

Upvotes: 1

Related Questions