使用ES6导入加载Bootstrap的最佳方法是什么？

Question

我最近从使用Require.js切换到使用Babel的WebPack.在过去,我会在我的JS模块中使用CommonJS标准,就像这样

import

由于Bootstrap是一个jQuery插件,jQuery会首先加载,而bootstrap会加载第二个.

Babel允许我使用ES6 $ is undefined语句.但是当我写作

window.$

我得到了错误import.Bootstrap假设import存在,但$ is undefined不会污染窗口对象,这是一件好事,但是我的代码如下:

window.$

必须有一个更好的解决方案.任何帮助赞赏.

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

祝好运.

Answer 2

Bootstrap 4解决方案

Bootstrap 4有两个依赖项:jQuery和Popper.js.

1. 安装必要的包:

   npm install jquery popper.js bootstrap --save
   

2. 在您的应用中,导入如下:

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

3. 如果你想$全局使用jQuery,把它添加到你的webpack配置(这webpack.base.conf.js对我来说):

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