ts + webpack에서 datepicker 사용하기

1. jquery-ui-dist 설치

datepicker는 jquery-ui에서 제공하고 있으며,  다운받으면 사용할 수 있다.
그런데 나같은 경우 jquery-ui로 webpack 설정을 하는데 실패해서 jquery-ui-dist를 사용했다.

npm i jquery-ui-dist

 

2. @types/jqueryui 설치

typescript와 jquery-ui의 호환을 위해서 @type/sjqueryui를 설치한다.

(datepicker만 사용하려면 @types/jquery.ui.datetimepicker를 설치해도 된다.)

npm i @types/jqueryui

 

3. alias 설정

lib 설치가 끝났으면 webpack.config.js에서 alias 설정을 해준다.
(alias 설정은 꼭 안 해도 되지만, import할 때 편하게 사용하기 위해 설정했다.)

module.exports = {
  // 다른 옵션들 생략
  resolve: {
    extensions: [".js", ".ts"],
    alias: {
      "jquery-ui": "jquery-ui-dist/jquery-ui.js",
      "jquery-ui-css": "jquery-ui-dist/jquery-ui.css"
    }
  }
}

 

4. loader 설정

만약 css 관련 loader가 설정되어있지 않다면, webpack.config.js에서 설정해주어야 한다.
jquery-ui 관련 css 파일을 사용하기 위해서다.

module.exports = {
  //생략
  module: {
    rules: [
      //ts loader 생략
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

 

5. 코드에서 사용하기

이제 ts 파일에서 다음과 같이 사용할 수 있다.
(import 구문은 alias 설정에 따라 달라질 수 있다.)

import 'jquery-ui'
import 'jquery-ui-css'

$('#datepicker').datepicker();

---

정 안 되면 꼼수라도

css같은 경우 html 파일에서 link tag로 불러와도 된다.
그러면 css loader 설정 및 불러오는 코드를 제거해도 된다.

정말 설정이 정 안 되면, 그냥 html 파일에서 cdn 방식으로 jquery-ui를 불러온 뒤
script tag에 직접 jquery-ui 관련 코드를 작성해서 사용하는 것도 방법이다.