如何在 ES6 中调用 bootstrap 的 jQuery 插件
How to call bootstrap's jQuery plugins in ES6
我一直在尝试调用 bootstrap 的 jQuery 插件,例如弹出窗口、工具提示、模态……
我正在使用 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
.
事实是我在我的 app.js
中仍然有这样的错误(如果我尝试使用 popover/modals/tooltip 是独立的),那是我从 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' 数组,以便 bootstrap 模块将使用 jQuery 全局对象:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
}),
这个插件实际上会将 'jquery' 模块注入任何其他需要他的模块(意思是,每个使用对象 jQuery 或 $ 或 window.jQuery 的模块),并且bootstrap就是其中之一。
我一直在尝试调用 bootstrap 的 jQuery 插件,例如弹出窗口、工具提示、模态……
我正在使用 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
.
事实是我在我的 app.js
中仍然有这样的错误(如果我尝试使用 popover/modals/tooltip 是独立的),那是我从 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' 数组,以便 bootstrap 模块将使用 jQuery 全局对象:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
}),
这个插件实际上会将 'jquery' 模块注入任何其他需要他的模块(意思是,每个使用对象 jQuery 或 $ 或 window.jQuery 的模块),并且bootstrap就是其中之一。