ES6

Question

にブートストラップのjQueryのプラグインを呼び出す方法を

私はポップオーバー、ツールチップ、モーダルのように、ブートストラップの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.min.jsをインポートすると思った。

事実は、私はまだ私のjavascriptはWebPACKのから生成された私のapp.jsで、このように（私はポップオーバー/モーダル/ツールチップで試す独立している場合）、エラーを持っているということです。

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

私が言うように、私はここにこだわっている。

最後の事、ブートストラップCSSが正しくこれのおかげで動作します：ブートストラップライブラリは、あなたのWebPACKの「プラグイン」のアレイに次のプラグインを追加してみてください 、jQueryのに依存しているため

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

を。 config.jsのブートストラップモジュールは、jQueryのグローバルオブジェクトを使用するように：

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

オブジェクトのjQueryを使用して、実際に彼（の手段を求めて他のモジュールの「jqueryの」モジュールを挿入します。このプラグインは、すべてのモジュールまたは$またはwindow.jクエリ）、ブートストラップのいずれかです。