javascript - vue와 함께 cdn을 사용하는 방법에 대한 조언을 요청하세요

Question

조언 좀 부탁드려요,

으아악

cdn을 사용하여 이와 같은 공개 js 파일을 참조하는 방법. 현재는 npm install로 설치되며 모두 로컬이며 내보내기가 제한되어 있습니다. cdn을 사용하여 가져올 수 있습니다. 하지만 현재는 모두 vue 프레임워크로 운영되고 있으며, html에서 직접 도입한 글쓰기 공간은 없습니다. 프로젝트에서 https://cdn.bootcss.com/eleme... 같은 공개 CDN을 사용하는 방법을 알려주세요.

Answer 1

으아악

Webpack은 이렇게 구성되어 있고, html에는 cdn의 jquery가 도입되었습니다

으아악

Answer 2

html 里中 从 CDN에서 직접 import만 하면, import해서 같이 패키징/압축할 필요가 없습니다

Answer 3

타사 라이브러리에 CDN 주소가 있는 경우 템플릿의 HTML에서 HTML에 직접 도입할 수 있습니다.
그런 다음 코드를 자신의 CDN에 던져 균일하게 관리하고 다른 정적 파일과 동일한 방식으로 처리할 수도 있습니다. 예를 들어 img 파일은 cdnUrl+projectName/img/에 배치되며 이러한 세 번째- 파티 라이브러리도 그 위에 던져집니다.
현재 로컬에서 npm 패키지로 관리하고 있으니 인용할 때 import하면 분명 webpack으로 패키징되겠죠... webpack 문제와 관련이 있습니다. 먼저 현재 문제를 해결할 수 있는지 살펴보겠습니다

Answer 4

웹팩 문서에 자세히 설명되어 있으니 jQuery를 예로 들어보세요.

https://doc.webpack-china.org...

Answer 5

문제를 해결하려면 다음 단계가 필요합니다.
1. npm을 통해 로컬에 설치된 js 파일을 추출하고 가져오기를 통해 이 부분을 추출할 수 있습니다. webpack 코드 분리를 참조하세요.

예:

으아악

2. HtmlWebpackPlugin을 사용하여 js 패키징 후 경로 및 파일 이름 문제를 해결하세요

으아악 으아악 으아악

최종 생성된 효과는 다음과 같습니다

으아악

문제는 주로 위의 공개 js 파일을 추출하는 데 있습니다. 추출 후 HtmlWebpackPlugin을 사용하여 리소스 경로를 자동으로 추가할지 수동으로 추가할지 여부는 개인 선택이므로 첫 번째 단계에 중점을 둡니다.