如何在 Bootstrap 和 Dojo 中使用 jQuery noConflict答案

【问题标题】：How to use jQuery noConflict with Bootstrap and Dojo如何在 Bootstrap 和 Dojo 中使用 jQuery noConflict
【发布时间】：2014-06-04 19:30:00
【问题描述】：

我编写了一个使用最新版本的 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.

【问题讨论】：

标签： javascript dojo twitter-bootstrap-3 js-amd

【解决方案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]

【讨论】：