web-dev-qa-db-de.com

Verwenden von CDN vs. Installation der Bibliothek durch NPM

Obwohl ich NPM verwendet habe, verstehe ich nicht, wie die Dateien in den node_modules meiner index.html hinzugefügt werden und von dort aus arbeiten.

Wenn ich beispielsweise jQuery verwenden muss, ist es so einfach. Ich werde die Datei über cdn bekommen und meine index.html-Datei hinzufügen

CASE I: CDN 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<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> 

Jetzt füge ich nicht von cdns hinzu, aber ich werde jetzt jQuery von NPM hinzufügen. Ich werde eine package.json-Datei erstellen und dann jQuery hinzufügen, indem Sie in den entsprechenden Ordner gehen und Folgendes eingeben: 

CASE II: NPM - node_module-Ordner

Ich habe jetzt die folgenden Schritte gemacht:

  1. Erstellt package.json von npm init --yes

  2. JQuery von npm install jquery --save enthalten

Nun sieht der Ordner so aus:  enter image description here

Nun, da ich nun den cdn-Link von jQuery entfernt habe, weiß ich nicht, wie die jQuery-Datei aus node_modules meiner index.html hinzugefügt wird. 

Bitte helfen Sie jemandem. Ich habe keine Ahnung ... ich mache das im Browser!

14
Deadpool

Ich habe Ihre Frage möglicherweise falsch verstanden ... Aber können Sie diese Zeile nicht einfach zu Ihrer index.html-Datei hinzufügen?

<script src="node_modules/jquery/dist/jquery.min.js"></script>
4
Charlie Guan

CDN

Verwenden Sie CDN, wenn Sie eine Website entwickeln, auf die Internetbenutzer zugreifen können.

CDN-Vorteile:

  • Wird in den meisten Browsern zwischengespeichert, da es von vielen anderen Websites verwendet wird

  • Reduzieren Sie die Bandbreite

prüfen Sie nach weiteren Vorteilen hier

NPM

npm ist ein hervorragendes Werkzeug zum Verwalten von Abhängigkeiten in Ihrer App mithilfe eines module Bundlers .

Beispiel:

angenommen, Sie verwenden einen webpack module Bundler und jQuery ist installiert

import $ from 'jQuery'
...
var content = $('#id').html();

da der Browser die import-Anweisung jedoch nicht versteht, müssen Sie den Code mit webpack-Befehlen umwandeln. Der Bundler überprüft alle verwendeten Abhängigkeiten und bindet sie in einer einzigen Datei ohne Abhängigkeitsprobleme.

nützliche Links: Erste Schritte mit Webpack

10
Jamil Hijjawi

zusätzlich zu den obigen "npm install" -Paketen auch zu local:

  1. lassen Sie Ihre lokale IDE Code Intellisense und Typprüfung zur Verfügung stellen;
  2. bereitstellen des Quellcodes für die (Webpack-) Bündelung, bei der alle JavaScript-Dateien zu einer (minimierten) einzelnen Datei zusammengefasst werden, sodass keine Abhängigkeiten bestehen.
2
Jiping

Ich denke, Sie möchten jQuery selbst hosten und innerhalb einer Webanwendung verwenden, die im Browser ausgeführt wird.

Wenn dies der Fall ist, müssen Sie diese Datei hosten, indem Sie sie über denselben Webserver herunterladen, den Sie für index.html verwenden.

Wenn Sie Express verwenden, können Sie auf der Serverseite Folgendes tun:

app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

Verweisen Sie dann auf die Datei in index.html:

<script src="/jquery/jquery.js"></script>

Informationen zum Bereitstellen statischer Dateien finden Sie in Express ' .

Wenn Sie Express nicht verwenden, müssen Sie das Stack-Handbuch Ihres Webservers lesen. Leider nicht zu erraten - ich habe ein Beispiel für Express.js gegeben, weil dies wahrscheinlich das am häufigsten verwendete Paket ist, wie das für node.js.

0
kamituel