CDN 사용 대 NPM에서 라이브러리 설치
최근에 NPM을 사용하기 시작했는데 파일이 어떻게 들어가는지 이해할 수 없습니다.node_modules내 것에 추가됩니다.index.html.
사례 1: CDN
예를 들어, CDN을 통해 jQuery를 사용하고 싶다면, 그것은 매우 간단합니다!CDN 링크를 에 추가합니다.<script>꼬리표를 달아요index.html줄과$를 즉시 사용할 수 있습니다.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
사례 2: NPM
지금은 CDN보다는 노드 모듈과 npm을 사용하려고 합니다.저는 다음과 같은 일을 했습니다.
- 창조했다
package.json을 이용하여npm init --yes - 다음과 함께 jQuery 패키지를 설치했습니다.
npm install jquery --save
프로젝트 폴더는 다음과 같습니다.
jQuery CDN 링크가 있는 스크립트 태그를 제거했습니다.index.html, jQuery를 추가하는 방법을 이해할 수 없습니다.node_modules?
저는 이것을 브라우저에서 하고 있습니다.
CDN
공용 인터넷 사용자가 액세스할 수 있는 웹 사이트를 개발하는 경우 CDN을 사용합니다.
CDN의 이점:
다른 많은 웹 사이트에서 사용하므로 대부분의 브라우저에서 캐시됩니다.
대역폭 축소
여기서 더 많은 혜택을 확인합니다.
NPM
npm은 모듈 번들러를 사용하여 앱의 의존성을 관리하는 좋은 도구입니다.
예:
웹팩 모듈 번들러를 사용한다고 가정하고,jQuery설치되어 있습니다.
import $ from 'jQuery'
...
var content = $('#id').html();
그러나 브라우저는 이해하지 못합니다.import웹팩 명령어로 코드를 변환시켜야 하기 때문에 번들러는 사용된 모든 종속성을 확인하고 종속성 문제 없이 하나의 파일로 묶을 것입니다.
유용한 링크: 웹팩 시작하기
위 외에npm install로컬에 대한 패키지도:
- 로컬 IDE에 지능형 코드와 형식 검사를 제공하도록 합니다.
- 모든 자바스크립트 파일을 (최소화된) 단일 파일로 결합하여 종속성이 없는 (웹팩) 번들링을 위한 소스 코드를 제공합니다.
제가 당신의 질문을 오해했을지도 모릅니다.하지만 이 선을 당신의 것에 추가할 수는 없나요?index.html파일?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
당신이 직접 jQuery를 호스팅하여 브라우저에서 실행되는 웹 앱 내에서 사용하길 원할 것 같습니다.
그렇다면 이 파일을 호스팅해야 합니다. 호스팅할 때 사용하고 있는 웹 서버를 통해 다운로드할 수 있도록 해야 합니다.index.html.
Express를 사용하는 경우 서버 측에서 다음과 같은 작업을 수행할 수 있습니다.
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
그리고 파일을 참조합니다.index.html:
<script src="/jquery/jquery.js"></script>
정적 파일을 제공하려면 Express의 매뉴얼을 참조하십시오.
Express를 사용하지 않는 경우 웹 서버의 스택 설명서를 참조해야 합니다.유감스럽게도 추측할 수 없습니다. 이것이 node.js에 대해 가장 인기 있는 패키지일 것이기 때문에 Express.js 예를 들었습니다.
여기에 명확성을 더하기 위해서입니다.
CDN은 페이지가 로드될 때 프런트 엔드 코드가 액세스하는 타사 서버 네트워크의 코드를 호스팅합니다.웹 사이트로 코드를 호스팅하는 것에 대해 걱정할 필요가 없습니다.
NPM은 Devor Production 웹 사이트에서 전체 NPM 소스 코드 기반을 결합한 개발 환경에서 사용하기 위한 것입니다.
다른 점은 CDN이 귀하의 웹 페이지에 제3자 코드를 제공할 책임이 있다는 것입니다.NPM을 사용하면 동일한 코드와 관련된 성능 및 유지보수를 수행할 책임이 있습니다.
템플릿에서 js 파일을 링크하지 않는 한(CDN 파일을 교체하지 않는) 이 파일은 "파일"되지 않습니다.CDN 링크 URI 대신 번들 출력 또는 컴파일 및 공개 js 파일을 링크해야 합니다.
언급URL : https://stackoverflow.com/questions/43605215/using-cdn-vs-installing-library-by-npm
'programing' 카테고리의 다른 글
| printf는 char 배열에서 16진수 인쇄에 'FFFFFF'를 추가합니다. (0) | 2023.10.25 |
|---|---|
| Mariadb - 확장된 삽입 실행 시간이 점차적으로 증가하고 있습니다. (0) | 2023.10.25 |
| 브라우저 캐시를 프로그래밍적으로 비우는 방법은? (0) | 2023.10.25 |
| 파워쉘 라운드 & 포맷 플로트를 최대 2자리수까지? (0) | 2023.10.20 |
| "0이 아닌 종료 상태" R 3.0.1 'XML' 및 'RCurl' (0) | 2023.10.20 |