Graceful Light

Vue에서 jquery와 bootstrap 전역으로 사용하기

2017-11-17


expose-loader의 설치가 필요 없는 방법을 사용해보자

Vuejs-kr에 좋은 내용이 있지만 웹팩을 통해 jquery를 꺼내는 방법이 더 간단하다.

설치

1
$ yarn add jquery bootstrap

설정

webpack

build/webpack.base.conf.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const webpack = require('webpack')
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}

eslint

.enlintrs.js
1
2
3
4
5
6
7
module.exports = {
...
globals: {
"$": true,
"jQuery": true
}
}

연동

src/main.js
1
2
3
4
...
import 'bootstrap'
new Vue({...})
🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요