在RequireJS应用程序中使用bootbox

Question

我有一个示例 app.js 文件：

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "jquery": "jquery",
      "app": "../app",
      "bootstrap": "bootstrap/js/bootstrap.bundle",
      "bootbox": "bootbox.min"
    },
    "shim": {
        "bootstrap": {
            "deps": ["jquery"],
            "exports": 'bootbox'
             },
        "main": { "deps": ["jquery","bootstrap"] },
        "bootbox": {
            "deps": ["jquery","bootstrap"],
            "exports": 'bootbox'
        },
    }
});

require(['jquery','bootstrap','bootbox'], function($){

    $(function(jquery) {
        bootbox.alert("bla")
    });
});

当我运行我的页面时，我可以看到正在抓取的正确JS文件：

......但我的代码失败了：

bootbox.alert("bla")

给出：

  

ReferenceError：未定义bootbox

我必须遗漏一些简单的事情（再次，如果这是一个新手错误，我会道歉 - 我仍然试图绕过这个图书馆）

Answer 1

不要将shim与Bootbox一起使用。如果查看Bootbox的源代码，您会看到它调用define，它将其注册为正确的AMD模块。对于不是正确AMD模块的代码，shim选项仅。

现在，Bootbox中的define执行此操作：

define(["jquery"], factory);

它设置了对jQuery的依赖，但这是错误的，因为实际上Bootbox 也依赖于Bootstrap存在。所以我们需要解决这个问题。以下显示了如何解决它。您可以使用map配置选项，以便在Bootbox需要jQuery时，它会获得Bootstrap。并为Bootstrap设置shim，这样除了依赖jQuery之外，它的模块值与jQuery（$）相同。

如果没有map设置，则无法保证Bootstrap会在Bootbox之前加载，并且您将面临竞争条件：有时它会工作，有时不会。

＆＃13;

＆＃13;

requirejs.config({
  baseUrl: ".",
  paths: {
    jquery: "//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min",
    bootstrap: "//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min",
    bootbox: "//github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min"
  },
  shim: {
    "bootstrap": {
      "deps": ["jquery"],
      // We set bootstrap up so that when we require it, the value with get is just $.
      // This enables the map below.
      "exports": "$"
    },
  },
  map: {
    // When bootbox requires jquery, give it bootstrap instead. This makes it so that
    // bootstrap is **necessarily** loaded before bootbox.
    bootbox: {
      jquery: "bootstrap",
    },
  }
});

require(["jquery", "bootbox"], function($, bootbox) {
  $(function(jquery) {
    bootbox.alert("bla");
  });
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

＆＃13;

＆＃13;

＆＃13;