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