[웹팩] Vue에 jquery 전역 등록하기

웹팩에 외부 라이브러리를 추가하는 방식에 대해 정리된 글이 많이 없어서 정리하고자 한다.

나는 오픈소스인 bootsrtap을 설치해 사용했으며, 이때 기반이 되는 jquery를 웹팩에 추가하는 방식으로 진행했다.CLI로 신규프로젝트 생성 및 bootstrap이 설치되었다는 가정 하에 진행한다! (npm i bootstrap)

 

1. Bootstrap 설정

Bootstrap이란?

반응형 웹사이트를 개발하기 위해 트위터에서 오픈소스로 공개한 UI Framework이다. jQuery기반으로 되어 있으며, PC, Tablet, Mobile의 스크린을 자유롭게 설계하여 UI의 표현을 가능하게 한다.

Bootstrap의 경우는 js 이외의 UI를 표현해주는 css파일도 포함시켜줘야 합니다.

따라서 아래와같이 두가지를 선언해준다.

 

@src/main.js 파일에 bootsrtap을 전역으로 선언해준다.

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 

 

 

 

2. jquery 설정

 

웹팩 파일을 모르겠거나 안보인다면 이 글을 참고하면 된다!

https://pro-jm.tistory.com/99

[웹팩] webpack.config.js VS vue.config.js

 

@src/main.js 파일에서 window.$ = require('jquery')
이렇게 선언하면 window.$('#id') 와 같이 사용할 수 있지만 나는 window.$ 대신 $ 만 쓰고자 웹팩 설정을 하였다.

웹팩 파일인 vue.config.js 파일에 다음과같이 추가하여준다.

const webpack = require('webpack')

module.exports = {
     outputDir: '../../개인경로',
}

configureWebpack {
     plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
}

 

 

3. eslint 설정

eslint를 사용하고 있다면 eslintrc.js 파일에 다음과 같이 설정 내용을를 추가해준다

module.exports = {
...(생략)

   globals: {
    $: true,
    jQuery: true
  }
}