webpack 에서 owl-carousel 1.3.3 사용
owl-carousel 을 사용하려는데, 이녀석들은 npm package 도 여러개가 있어서 어느것을 사용할 지 몰랐다. 그래서 이것저것 사용을 해 보려고 일단 설치를 했다.그런데 import 가 안된다.
정확히는 아래처럼 error message 가 보인다.
Module not found: Error: Can't resolve 'owlcarousel-umd' in '<project_root>\src\js'
그런데 잘 보면 node_modules 에서 찾지 않고, js 에서 찾고 있었다.
이런 경우에 module 의 package.json 이 제대로 설정되어 있지 않은 경우일 수 있다. 적어도 owl-carousel 의 경우는 그러했다.
owlcarousel-umd 의 예를 들면, package.json 이 아래처럼 되어 있다.
<project_root>\node_modules\owlcarousel-umd\package.json
{ "name": "owlcarousel-umd", "version": "1.3.3", "description": "Owl Carousel. Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.", "files": [ "owl-carousel/owl.carousel.js" ], ...
main | package.json
여기에 빠져있는 부분이 "main" 인데, 이녀석이 없어서 webpack 에서 인식을 못한다. 그래서 아래 부분을 추가해줬다."main" : "owl-carousel/owl.carousel.js",
그러니 webpack 에서 import 가 잘 동작한다.
댓글 없음:
댓글 쓰기