Comment installer un projet NPM

Ce guide se termine en démontrant comment installer et utiliser un projet NPM préexistant. Il s'agit d'une pratique courante, simplifiant considérablement le développement par rapport à la configuration manuelle des composants individuels. Nous utiliserons un projet de démarrage du blog statique Sveltekit Sveltekit comme exemple.

Chapitres de guide

1. Pour qui est ce guide?
2. Que signifie "NPM"?
3. Quelle est la ligne de commande?
4. Qu'est-ce que le nœud?
5. Qu'est-ce qu'un gestionnaire de packages?
6. Comment installez-vous NPM?
7. Comment installez-vous les packages NPM?
8. Que sont les commandes NPM?
9. Comment installer un projet NPM existant? (Vous êtes ici!)

Un exemple du monde réel: le démarreur du blog statique sveltekit

Ce guide utilise un projet de démarrage de blog statique Sveltekit. Ce projet, préconfiguré avec de nombreux packages, démontre effectivement le processus. (Remarque: les connaissances sveltekit antérieures ne sont pas requises.) Sveltekit exploite Vite, un package NPM fournissant des outils de construction modernes et un serveur de développement rapide.

Cloner le projet

Le clonage, essentiellement à copier le projet, peut se faire de deux manières:

1. GitHub UI: accédez au référentiel GitHub, cliquez sur la liste déroulante "Code" et sélectionnez "Télécharger Zip".
2. Ligne de commande: à l'aide de la ligne de commande, accédez à votre répertoire de projet souhaité et exécutez:

 NPX DEGIT https://github.com/josh-collinsworth/sveltekit-blog-starter.git sveltekit-blog-starter

npx degit clones Le projet sans histoire GIT.

Après le clonage, un dossier sveltekit-blog-starter est créé. Ouvrez-le dans votre éditeur de code, ouvrez un terminal et exécutez npm install (ou npm i ). Tout avertissement de vulnérabilité peut être ignoré en toute sécurité pour ce projet de démonstration.

Exécuter le serveur et apporter des modifications

Le fichier package.json contient la commande de développement:

 NPM Run Dev

L'exécution de cette commande démarre le serveur (accessible sur http://localhost:3000 ). Les modifications des fichiers (SASS, Markdown, Svelte Components) se reflètent instantanément dans le navigateur.

Comprendre les importations

Cette section met en évidence l'importance des importations dans les projets NPM. Le guide présente à la fois les importations ES6 (la norme moderne) et l'ancien style CommonJS. La clé est que NPM gère la résolution des importations de packages, simplifiant le développement. Les importations ES6 nécessitent un bundler / compilateur pour le traitement.

Construire le site final

La plupart des projets NPM ont deux phases principales: le développement et la construction de production. La commande:

 NPM Run Build

Crée un dossier build prêt pour la production contenant des fichiers statiques optimisés (HTML, CSS, JavaScript). npm run preview permet de visualiser le site construit.

Déploiement moderne

Le déploiement moderne s'intègre souvent à des services comme Netlify ou Vercel, l'automatisation du processus de construction et de déploiement sur le code pousse vers la branche principale.

Conclusion

Ce guide a couvert de manière globale le NPM, de ses principes fondamentaux à l'installation et à l'utilisation des projets existants. L'accent était mis sur l'application et la compréhension pratiques, fournissant une base solide pour une exploration plus approfondie. ← Chapitre 8 Guide Chapitres

1. Pour qui est ce guide?
2. Que signifie "NPM"?
3. Quelle est la ligne de commande?
4. Qu'est-ce que le nœud?
5. Qu'est-ce qu'un gestionnaire de packages?
6. Comment installez-vous NPM?
7. Comment installez-vous les packages NPM?
8. Que sont les commandes NPM?
9. Comment installer un projet NPM existant? (Vous êtes ici!)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!