ES6

Question

에 부트 스트랩의의 jQuery 플러그인을 호출하는 방법을

나는 팝 오버, 툴팁, 조동사처럼, 부트 스트랩의의 jQuery 플러그인을 호출하려고 붙어있어, ...

나는 웹팩을 사용하고 있는데이 내 ES6의 자바 스크립트입니다 :

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을 가져 오는 것으로 생각했습니다.

사실은 내가 여전히 내 자바 스크립트가 웹팩에서 생성되는 내 app.js에서이 같은 (내가 팝 오버/조동사/툴팁 시도 독립적 경우) 오류를 가지고있다 :

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

내가 말처럼, 나는 여기 붙어있다.

마지막 것은은 부트 스트랩 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를에 의존하기 때문에. config.js 부트 스트랩 모듈은 jQuery를 전역 객체를 사용할 수 있도록 :

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

객체 jQuery를 사용하여 실제로 그 (수단을 요구 다른 모듈에서 'JQuery와'모듈을 주입 것입니다이 플러그인, 모든 모듈 또는 $ 또는 window.j 쿼리), 부트 ​​스트랩 중 하나입니다.