외부 자바 스크립트 라이브러리 번들

Question

나는 종종 npm 이상의 옵션을 설치하여 브라우저 중심의 자바 스크립트 라이브러리를 볼 수 있습니다.

<script src="cdn-url"></script>을 사용하는 대신 npm을 사용하여 설치할 이유가 있습니까?

많은 라이브러리를로드 중이므로이 파일을 가져 오는 것이 좋습니다. 따라서 모든 요청이 CDN을 대상으로하고 있지만 너무 많은 URL 요청을하지는 않습니다.

잠재적으로 npm을 통해 설치 한 다음 <script src='/node_modules/...'></script>을 사용할 수는 있지만 이러한 경로는 express.static() 또는 이와 비슷한 방법으로 공개 액세스 할 수 있도록해야합니다.

나는 webpack, browserify 등을 사용할 수 있다는 것을 알고 있지만, 단지 몇 개의 외부 라이브러리를 자동으로 하나의 파일로 묶고 싶을 때 지나치게 복잡해 보입니다.

Answer 1

이 경우 npm을 사용하면 자동으로 업데이트를 얻을 수 있습니다. 요청 횟수를 줄이고 스크립트 태그를 하나만 포함하려면 번들합니다.

그러나 나는 단지 몇 개의 외부 라이브러리를 하나의 파일에 자동으로 묶고 싶을 때 지나치게 복잡해 보입니다.

이것은 불행하게도 복잡합니다. 그렇지 않은 것이 좋을 것입니다. 또한 라이브러리를 업데이트 할 때 브라우저 캐싱과 같은 것에 관해 생각할 필요가 있습니다. 공급 업체 라이브러리 번들이있는 경우 업데이트 할 때 쿼리 문자열을 수동으로 캐시 버스트해야합니다. 프로세스를 단순화하기 위해 webpack이 모든 작업을 처리합니다.

필자는 Webpack으로 이동하여 CommonsChunkPlugin을 사용하여 공급 업체 빌드를 작성했습니다. See this example.

모든 것을 완전히 자동화하려면이 태그를 Html Webpack Plugin과 결합하여 자동으로 스크립트 태그와 캐시 해시를 해싱과 함께 추가하십시오.