javascript - RequireJS - 保护我的 jQuery 插件

Question

我们正在实现一个包含大量跟踪的大型网站。有一家特定的第 3 方跟踪公司在其标记中包含 jquery。

他们正在调用jQuery.noConflict(true);正在删除 window.$ 和 window.jQuery。

我的网站是使用 RequireJS 组织的，我已经实现了 jquery 的配置映射 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 );
});

我想知道如何保护我的所有代码免受第 3 方插件的挤压 window.jQuery。

我是否需要将每个插件包装在 AMD 包装器中，并使用以下内容:

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

或者是否有某种全局方法可以做到这一点？

谢谢，斯科特

Answer 1

如果您询问您制作的 jQuery 插件，那么这将是正确的解决方案。

如果您询问第 3 方插件，您可以为每个插件添加垫片配置:

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

来自official docs关于垫片:

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.

文档中还有一个 jQuery 插件的示例:

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']
    }
});

以下是文档中的一些关键注释:

• 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 }});.