Mit Bootbox in RequireJS App

Question

Ich habe eine Probe app.js Datei mit:

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

Wenn ich meine Seite laufen, kann ich die richtigen JS-Dateien sehen packte werden:

... noch mein Code nicht:

bootbox.alert("bla") 

Gibt:

ReferenceError: bootbox is not defined

ich etwas einfach nicht fehlen darf (wieder entschuldigen, wenn dies ein Neuling Fehler ist - ich bin immer noch um diese Bibliothek meinen Kopf zu bekommen versuchen)

Answer 1

Verwenden shim nicht mit Bootbox. Wenn Sie sich den Quellcode von Bootbox ansehen, werden Sie feststellen, dass er aufruft, wodurch er als richtiges AMD-Modul registriert wird. Die shim Option ist nur für Code, der kein richtiges AMD-Modul ist.

nun die define in Bootbox tut dies:

define(["jquery"], factory); 

Es eine Abhängigkeit von jQuery setzt, aber das ist falsch, denn in der Tat Bootbox auch abhängig auf Bootstrap vorhanden ist. Also müssen wir das beheben. Im Folgenden wird gezeigt, wie Sie es beheben können. Sie können eine map Konfigurationsoption verwenden, damit Bootstrap Bootboot erhält, wenn Bootbox jQuery benötigt. Und Sie setzen eine shim für Bootstrap, so dass, zusätzlich zu einer Abhängigkeit von jQuery, der Modulwert der gleiche wie jQuery ($) ist.

Ohne die map Einrichtung, gibt es keine Garantie, dass Bootstrap vor Bootbox geladen wird und Sie werden mit einer Race Condition konfrontiert werden: manchmal wird es funktionieren, manchmal nicht.

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