web-dev-qa-db-fra.com

Utilisation de CDN vs Installation de la bibliothèque par NPM

Bien que j'utilise NPM, mais je ne comprends pas comment les fichiers des nœuds_modules sont ajoutés à mon index.html et fonctionnent à partir de là.

Par exemple, si je dois utiliser jQuery, c’est si simple. Je vais obtenir le fichier via CDN et ajouter dans mon fichier index.html

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

Maintenant, j'ajoute pas par cdns, mais je vais maintenant inclure jQuery par NPM. Je vais créer un fichier package.json, puis ajouter jQuery en allant dans le dossier respectif et en tapant: 

CASE II: NPM - dossier node_module

J'ai maintenant fait les étapes suivantes:

  1. Créé package.json par npm init --yes

  2. JQuery inclus par npm install jquery --save

Maintenant, par dossier ressemble à ceci:  enter image description here

Maintenant, comme j'ai maintenant supprimé le lien cdn de jQuery, je ne sais pas comment le "fichier jQuery" de node_modules sera ajouté à mon index.html? 

S'il vous plaît, aidez quelqu'un. Je n'ai aucune idée ... Je le fais sur le navigateur!

javascriptjqueryhtmlnode.jsnpm
14
Deadpool

J'ai peut-être mal compris votre question ... Mais ne pouvez-vous pas simplement ajouter cette ligne à votre fichier index.html?

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

CDN

Utilisez CDN si vous développez un site Web qui sera accessible aux utilisateurs d’Internet.

Avantages CDN:

  • Sera mis en cache sur la plupart des navigateurs, car il est utilisé par beaucoup d'autres sites Web

  • Réduire la bande passante

vérifier pour plus d'avantages ici

NPM

npm est un excellent outil pour gérer les dépendances de votre application à l'aide d'un module de module .

Exemple:

supposons qu’en utilisant un webpack } module de module et que jQuery soit installé

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

mais le navigateur ne comprend pas l'instruction import et vous devez donc transpiler le code avec les commandes webpack. Le bundleur vérifiera toutes les dépendances utilisées et les liera dans un seul fichier sans aucun problème de dépendance.

liens utiles: Premiers pas avec webpack _

10
Jamil Hijjawi

Je pense que vous souhaitez héberger vous-même jQuery et l'utiliser dans une application Web exécutée dans le navigateur.

Si tel est le cas, vous devez héberger ce fichier - le rendre téléchargeable via le même serveur Web que vous utilisez pour héberger index.html.

Si vous utilisez Express, vous pouvez faire quelque chose comme ceci côté serveur:

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

Et puis référencez le fichier dans index.html:

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

Voir le manuel de Express pour la distribution de fichiers statiques .

Si vous n'utilisez pas Express, vous devez consulter le manuel de la pile de votre serveur Web. Aucun moyen de deviner malheureusement - j'ai donné un exemple Express.js parce que c'est probablement le paquet le plus populaire de ce type pour node.js.

0
kamituel