it-swarm.com.de

Was ist der beste Weg, um Bootstrap mit einem ES6-Import zu laden?

Ich habe vor kurzem von Require.js auf WebPack mit Babel umgestellt. In der Vergangenheit würde ich in meinen JS-Modulen den CommonJS-Standard verwenden

var $ = require('jquery'); require('bootstrap');

Da Bootstrap ein jQuery-Plugin ist, wird jQuery zuerst geladen und Bootstrap wird als zweites geladen.

Babel erlaubt mir die Verwendung von ES6 import-Anweisungen. Aber wenn ich schreibe

import $ from 'jquery'; import Bootstrap from 'bootstrap';

Ich erhalte die Fehlermeldung, dass $ is undefined. Bootstrap geht davon aus, dass window.$ vorhanden ist, aber import das Fensterobjekt nicht verschmutzt.

// legacy loading for bootstrap var $ = require('jquery'); window.$ = $; require('bootstrap'); // the rest of the imports import _ from 'underscore';

Es muss eine bessere Lösung geben. Jede Hilfe geschätzt.

17
BishopZ

Wenn Sie Webpack in Ihrem Build haben ...

... Sie müssen mit Webpacks Plugin arbeiten. Da der Fehler jQuery is not defined ist, werden wir Definieren/Bereitstellen mit dem Plugin _: 

Im webpack configuration:

// webpack.config.js
...
plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
]
...

Nun in unserem ES6/2015 module:

// main.js
...
// jquery is required for bootstrap
import $ from 'jquery'

// bootstrap
import 'bootstrap'

// bootstrap css 
import 'bootstrap/dist/css/bootstrap.css'
...

Reference:https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/

Viel Glück.

18
Akash

Bootstrap 4-Lösung

Bootstrap 4 hat zwei Abhängigkeiten: jQuery und Popper.js .

  1. Installiere notwendige Pakete:

    npm install jquery popper.js bootstrap --save
    
  2. Importieren Sie in Ihrer App wie folgt:

    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.css';
    
  3. Wenn Sie $ global für jQuery verwenden möchten, fügen Sie dies Ihrer Webpack-Konfiguration hinzu (dies ist für mich webpack.base.conf.js):

    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ]
    
5
Michael Hays

Wenn Sie Bootstrap 4 alpha verwenden, benötigen Sie tether sowie jQuery. Importe werden hier besprochen: So beheben Sie den Fehler; 'Fehler: Bootstrap-Tooltips erfordern Tether (http://github.hubspot.com/tether/)'

1
Husterknupp
import './wrappers/jquery';
import 'bootstrap';

und in wrappers/jquery.js:

import jquery from 'jquery;
window.jQuery = window.$ = jquery;
0
Koby