代码之家 › 专栏 › 技术社区 › Andrew Newby

在RequireJS应用程序中使用bootbox

bootbox requirejs

3

Andrew Newby · 技术社区 · 7 年前

我有一个样本 应用程序。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:未定义引导框

我一定错过了一些简单的东西(再次道歉,如果这是一个新手的错误-我仍在努力了解这个库)

1 回复 | 直到 7 年前

1

Louis 7 年前

不要使用 shim 带Bootbox。如果你看一下Bootbox的源代码,你会发现它调用了 define ,将其注册为适当的AMD模块。这个 垫片 只有对于不是适当AMD模块的代码。

现在 定义 在Bootbox中执行以下操作:

define(["jquery"], factory);

它设置了对jQuery的依赖,但这是错误的,因为实际上是Bootbox 而且取决于引导是否存在。所以我们需要解决这个问题。下面显示了如何修复它。你可以使用 map 配置选项,这样当引导盒需要jQuery时,它就会得到引导。你设置了一个 垫片 对于引导,除了依赖于jQuery之外,其模块值与jQuery相同( $ ).

没有设置时,无法保证引导会在引导盒之前加载,并且您将面临竞争条件:有时它会工作,有时不会。

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