javascript - 如何将 jQuery noConflict 与 Bootstrap 和 Dojo 结合使用

Question

我编写了一个小部件，它使用最新版本的 jQuery、Bootstrap 和 Dojo for AMD。问题是它将嵌入到具有旧版本 jQuery 的页面中。 (客户端页面，我无法控制)

我正在尝试使用 jQuery 的 noConflict 选项，但当我尝试加载 Bootstrap 时无法使其工作。

简单的无冲突工作:

require(["jquery"], function (jQueryForPlugin) {

  // create local scope var and resets the global $ and jQuery 
  // to their previous values, so we don't mess up client's page
  var jQuery = jQueryForPlugin.noConflict(true);
  var $ = jQuery;

  // Now I can use $ like normal, and it will use my widget's jQuery version.
  $('.some-class').hide();

问题出在其他库上，特别是 Twitter Bootstrap，当我加载它们时，它们看不到新的作用域 jQuery 变量。

Bootstrap 无法看到本地 noConflict $ 和 jQuery : JSFiddle of problem

require(["jquery"], function (jQueryForPlugin) {
  // Resets the global $ and jQuery to their previous values.
  var jQuery = jQueryForPlugin.noConflict(true);
  var $ = jQuery;

  require([ 'bootstrap'], function ( bootstrap) {
    // ERR: Bootstrap load throws error because it can't find 'jQuery' in its scope.

Answer 1

Vanilla Bootstrap 不兼容 AMD。您必须稍微编辑一下 Bootstrap 的 JS，以便自己添加到 AMD 模块样板中，这样它就可以 require() jQuery。

另请参阅https://github.com/twbs/bootstrap/pull/12909

[ 编辑:Bootstrap v3.2.0 应该与 AMD 兼容!请参阅https://github.com/twbs/bootstrap/pull/13772 ]