[JSFiddle] npm 패키지 임포트(import) 하는 방법

블로그를 사용하며 코드의 결과물을 보여주는데 JSFiddle 사이트를 많이 이용하고 있다.



이번에도 JSFiddle 을 이용하여 코드를 작성하는데 따로 dist 파일이 배포되지 않고 npm 패키지만 있는 라이브러리가 있었다.

어떻게 포함을 하는지 찾아보니 역시 또 누군가 https://unpkg.com/ 이런 멋진 사이트를 만들어 놨네..



아래의 npm package를 JSFiddle 에 import 하려고 한다.
1004lucifer
https://www.npmjs.com/package/vue-datetime

설치방법에 vue-datetime 이외에 luxon, weekstart 가 추가로 필요하고, css파일을 import 해줘야 한다고 한다.

unpkg 에서는 https://unpkg.com/vue-datetime/ 과 같이 패키지명 마지막에 슬래시(/)를 붙이면 URL이 최신버전으로 변경되며 패키징된 파일을 디렉토리 구조로 확인이 가능하다.
1004lucifer

방법

 - 다음과 같이 패키지와 필요한 파일(css 등)을 추가해준다.

1004lucifer



다음은 위의 방법을 사용해서 vue-datetime npm package 를 JSFiddle 에 넣어서 만든 예제이다.

 - javascript 부분에 따로 import 없이 자동으로 import가 되었다.
 - 일정시간이 지나면 캐시파일이 삭제되므로 unpkg를 이용해 JSFiddle 예제를 만든경우 오랜만에 Result를 띄우면 시간이 오래(몇초) 걸린다.






참고
 - https://unpkg.com/
 - https://stackoverflow.com/questions/46845199/how-to-import-npm-package-in-jsfiddle
 - https://stackoverflow.com/questions/55340816/jsfiddle-code-sample-for-ui5-web-components-using-unpkg-com-to-avoid-dependency
 - https://jsfiddle.net/gongzza/kyp2f0sk/