javascript – 如何在ES6中调用bootstrap的jQuery插件

2019年7月21日 300次阅读

我试图调用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']);
});

最佳答案 因为bootstrap库依赖于jQuery,

您应该尝试将以下插件添加到webpack.config.js中的’plugins’数组中,以便引导程序模块将使用jQuery全局对象：

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

这个插件实际上会在任何其他要求他的模块中注入’jquery’模块(意味着,每个使用jQuery或$或window.jQuery对象的模块),而bootstrap就是其中之一.

点赞