web-dev-qa-db-fra.com

Quel est le meilleur moyen de charger Bootstrap avec une importation ES6?

Je suis récemment passé de Require.js à WebPack avec Babel. Auparavant, j'utilisais le standard CommonJS dans mes modules JS, comme ceci

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

Puisque Bootstrap est un plugin jQuery, jQuery se chargerait en premier et Bootstrap se chargerait en second.

Babel me permet d’utiliser des instructions ES6 import. Mais quand j'écris

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

Je reçois l'erreur que $ is undefined. Bootstrap suppose que window.$ est présent, mais import ne pollue pas l'objet window, ce qui est une bonne chose, mais laisse mon code comme suit:

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

Il doit y avoir une meilleure solution. Toute aide appréciée.

twitter-bootstrapimportecmascript-6
17
BishopZ

Si vous avez Webpack dans votre construction ...

... vous aurez besoin de travailler avec le plugin fourni par Webpack. Puisque l'erreur est que jQuery is not defined nous allons définir/fournir le avec le plugin 

Dans le webpack configuration:

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

Maintenant, dans notre ES6/2015 module:

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

// bootstrap
import 'bootstrap'

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

Référence:https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/

Bonne chance.

18
Akash

Solution Bootstrap 4

Bootstrap 4 a deux dépendances: jQuery et Popper.js .

  1. Installez les paquets nécessaires:

    npm install jquery popper.js bootstrap --save

  2. Dans votre application, importez comme ceci:

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

  3. Si vous souhaitez utiliser $ globalement pour jQuery, ajoutez ceci à votre configuration Webpack (il s'agit de webpack.base.conf.js pour moi):

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

Si vous utilisez Bootstrap 4 alpha, vous aurez besoin de tether ainsi que jQuery. Les importations sont discutées ici: Comment corriger l'erreur; 'Erreur: les infobulles de Bootstrap nécessitent Tether (http://github.hubspot.com/tether/)'

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

et en wrappers/jquery.js:

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