在 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 is not defined

我一定是遗漏了一些简单的东西（再次，如果这是新手错误，我深表歉意 - 我仍在努力了解这个库）

Answer 1

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

现在，Bootbox 中的 define 是这样做的：

define(["jquery"], factory);

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

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

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");
  });
});

<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" />

在 RequireJS 应用中使用 bootbox

Using bootbox in RequireJS app

requirejs

bootbox