Каков наилучший способ загрузки Bootstrap с импортом ES6?

Недавно я переключился с использования Require.js на использование WebPack с Babel. Раньше я использовал стандарт CommonJS в своих JS-модулях, например этот

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

Так как Bootstrap - это плагин jQuery, jQuery загрузится первым, а bootstrap загрузит второй.

Вавилон позволяет мне использовать инструкции ES6 import. Но когда я пишу

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

Я получаю сообщение об ошибке $ is undefined. Bootstrap предполагает, что window.$ присутствует, но import не загрязняет объект окна, что хорошо, но оставляет мой код следующим образом:

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

Должно быть лучшее решение. Любая помощь была оценена.

Ответы

Ответ 1

Если у вас есть `Webpack` в вашей сборке...

... вам нужно будет работать с Webpack, обеспечивающим плагин. Поскольку ошибка такова, что jQuery is not defined мы определим/предоставим ее плагину:

В `webpack configuration`:

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

Теперь, в нашем `ES6/2015 module`:

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

// bootstrap
import 'bootstrap'

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

Ссылка: https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/

Удачи.

Ответ 2

Если вы используете Bootstrap 4 alpha, вам понадобится tether, а также jQuery. Импорт обсуждается здесь: Как исправить ошибку; 'Ошибка: подсказки Bootstrap требуют Tether (http://github.hubspot.com/tether/)'

Ответ 3

Развернув ответ Husterknupp, вот полное решение, использующее Bootstrap 4 Alpha:

Установите необходимые пакеты:

npm install [email protected] jquery tether --save

Добавьте в свою конфигурацию webpack (для меня это webpack.base.conf.js):

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

В вашем приложении импортируйте так:

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