twitter-bootstrap - tutorial - como usar bootstrap

¿Cuál es la mejor manera de cargar Bootstrap con una importación de ES6?

Question

Recientemente cambié de Require.js a usar WebPack con Babel. En el pasado, usaba el estándar CommonJS en mis módulos JS, como este

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

Como Bootstrap es un plugin de jQuery, jQuery se cargaría primero y el bootstrap cargaría el segundo.

Babel me permite usar declaraciones de import ES6. Pero cuando escribo

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

Me sale el error de que $ is undefined . Bootstrap asume que la window.$ Está presente, pero la import no contamina el objeto de la ventana, lo cual es bueno, pero deja mi código así:

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

Debe haber una mejor solución. Cualquier ayuda apreciada.

Answer 1

Si tiene un Webpack en su compilación ...

... tendrás que trabajar con el plugin de proporcionar de Webpack . Como el error es que jQuery is not defined , lo definiremos / le proporcionaremos el complemento:

En la webpack configuration del webpack configuration :

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

Ahora, en nuestro ES6/2015 module :

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

// bootstrap
import ''bootstrap''

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

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

Buena suerte.

Answer 2

Ampliando la respuesta de Husterknupp, aquí está la solución completa usando Bootstrap 4 Alpha :

Instale los paquetes necesarios:

npm install [email protected] jquery tether --save

Agregue a su configuración de paquete web (esto es webpack.base.conf.js para mí):

plugins: [
  new webpack.ProvidePlugin({
      jQuery: ''jquery'',
      jquery: ''jquery'',
      $: ''jquery'',
      Tether: ''tether''
  })
]

En su aplicación, importe así:

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

Answer 3

Si está utilizando Bootstrap 4 alpha , necesitará tether y jQuery . Las importaciones se discuten aquí: cómo solucionar el error; ''Error: la información sobre herramientas de Bootstrap requiere Tether (http://github.hubspot.com/tether/)''