Question

我们正在实施一个对其进行大量跟踪的大型网站。有一个特定的第三方跟踪公司，包括用于标记的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 );
});

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

我是否需要将每个插件包装在AMD包装器中，其中包含以下内容：

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

或者有一些全球性的方法吗？

谢谢，斯科特

Answer 1

如果你问的是你做过的jQuery插件，那么这将是正确的解决方案。

如果您询问第三方插件，可以为每个插件添加一个shim配置：

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

来自official docs关于shim：

配置依赖项，导出和自定义初始化旧的，传统的“浏览器全局”脚本，不使用define（）声明依赖项并设置模块值。

文档中还有jQuery插件的示例：

对于只需要导出任何模块值的jQuery或Backbone插件的“模块”，shim配置只能是一个依赖项数组：

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

以下是文档中的一些重要说明：

shim配置仅设置代码关系。要加载属于或使用shim config的模块，需要正常的require / define调用   需要。设置填充程序本身不会触发加载代码。

如果无法升级已调整的代码以使用AMD define（）调用，则自RequireJS 2.1.11起，优化程序将wrapShim   构建选项，将尝试自动将填充的代码包装在一个   build（）用于构建。这改变了shimmed依赖的范围，   因此不能保证始终有效，但是，例如，为了整理   依赖于AMD版本的Backbone的依赖关系，它可以   有帮助的。

通过RequireJS在节点中运行AMD模块时不支持Shim config（虽然它适用于优化器）。取决于模块   被填充，它可能在Node中失败，因为Node不具有相同的功能   全球环境作为浏览器。从RequireJS 2.1.7开始，它会发出警告   你在控制台中不支持shim配置，它可能或   可能行不通。如果您希望禁止该消息，则可以通过   requirejs.config({ suppress: { nodeShim: true }});。

RequireJS - 保护我的jQuery插件

1 个答案: