如何在ES6中調用bootstrap的jQuery插件

Question

我試圖調用bootstrap的jQuery插件，比如popover，tooltip，modals，...

我正在使用webpack，這是我的ES6 javascript：

import $ from 'jquery';
//import Bootstrap from 'bootstrap-sass';
//import Bootstrap from 'bootstrap-loader';
import Bootstrap from '../vendor/bootstrap.min.js';

class Test {
    constructor () {
        $('[data-toggle="tooltip"]').tooltip({ html: true });
    }
}

我試圖用npm安裝bootstrap，但之后我不確定我必須導入哪個節點模塊（就像你可以在導入的注釋行中看到）。 所以，我想直接導入bootstrap.min.js 。

事實是我仍然有一個錯誤（獨立，如果我嘗試使用popover / modals / tooltip）這樣在我的app.js ，這是我從webpack生成的javascript：

Uncaught TypeError: (0 , _jquery2.default)(...).tooltip is not a function

就像我說的，我被困在這里。

最后，由於這個原因，boostrap CSS正常工作：

gulp.task('bootstrap-fonts', function() {
    return gulp.src('node_modules/bootstrap-sass/assets/fonts/bootstrap/*')
  .pipe(gulp.dest('./app/assets/fonts/bootstrap'));
});

gulp.task('dev', ['css', 'bootstrap-fonts', 'browser-sync', 'webpack'], function () {
    gulp.watch('src/scss/**/*.scss', ['css']);
    gulp.watch('src/js/**/*.js', ['webpack']);
    gulp.watch('app/*.html', ['bs-reload']);
});

Answer 1

因為引導庫依賴於jQuery，所以您應該嘗試將以下插件添加到webpack.config.js中的“plugins”數組中，以便引導程序模塊將使用jQuery全局對象：

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": 'jquery'
}),

這個插件實際上會在任何其他要求他的模塊中注入'jquery'模塊（意味着，每個使用jQuery或$或window.jQuery對象的模塊），而bootstrap就是其中之一。