Que diable sont les commandes NPM?

En tant que gestionnaire de packages, NPM peut également exécuter des tâches similaires aux outils d'exécution de la tâche de ligne de commande antérieurs tels que Grunt et Gulp. Après avoir installé le package SASS dans le chapitre précédent, nous pouvons commencer à l'utiliser!

Chapitre du guide

1. Pour qui est ce guide?
2. Que signifie exactement "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 installer NPM?
7. Comment installer le package NPM?
8. Qu'est-ce que la commande NPM? (Votre emplacement actuel!)
9. Comment installer un projet NPM existant?

Commande NPM en profondeur

Ouvrez le fichier package.json dans le dossier de test, vous ne verrez pas beaucoup dependencies contenu pour le moment;

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

Cependant, le fichier package.json contient bien plus que les dépendances. Il contient également beaucoup de méta-information sur le projet. La partie la plus intéressante est une propriété facultative mais très utile appelée scripts .

N'oubliez pas que toutes les sous-dépendances de SASS sont enregistrées dans le package-lock.json et ne doivent pas être modifiées manuellement. package.json ne contient généralement que des dépendances de niveau supérieur, et nous pouvons le personnaliser librement.

scripts dans le fichier package.json vous permet de créer des commandes qui peuvent être exécutées dans le projet pour vous aider à gérer diverses tâches, qu'il s'agisse d'un processus exécutif ou d'un processus en cours continu. En règle générale, ces «tâches» sont utilisées pour démarrer des serveurs de développement développés localement, compiler des ressources et / ou exécuter des tests. En fait, une commande start ou dev est souvent intégrée à un projet pour gérer toutes les tâches dont vous pourriez avoir besoin pour exécuter simultanément, comme la compilation SASS et JavaScript dans l'ordre.

Nous n'avons pas encore de scripts à exécuter, mais corrigeons cela!

Exemple: compiler les sass en CSS

Dans la section scripts du fichier package.json , nous pouvons accéder à tous les packages installés. Même si nous ne pouvons pas taper la commande SASS directement dans le terminal en ce moment, nous pouvons exécuter la commande SASS dans le cadre du script NPM.

Si SASS est installé globalement (ce qui signifie une installation à l'échelle du système, pas dans un dossier de projet spécifique), nous pouvons exécuter la commande SASS dans le terminal. Jusqu'à présent, nous n'avons installé SASS que dans ce dossier (c'est le comportement par défaut lors de l'installation de packages). Cependant, l'installation globale mettra la commande SASS disponible n'importe où sur le système.

Tout d'abord, collez ce code de code dans votre fichier package.json immédiatement après le début { Braces Curly:

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

La syntaxe JSON est très stricte. Si vous avez des problèmes, essayez d'exécuter le contenu du fichier à l'aide du validateur JSON.

Cela nous donne accès au <code>npm run sass:build</code> Script, qui compilera Sass à CSS pour nous!

Le nom de la commande n'a pas d'importance, tant qu'il s'agit d'une chaîne continue. Il convient également de noter que le côlon (:) n'a pas d' sass particulier ici build

Si vous avez déjà utilisé la commande SASS (ou si vous avez regardé à l'avance), vous savez peut-être que cela signifie que nous devons également créer un fichier style.scss dans la racine du dossier du projet. Faisons cela et mettons un code SASS arbitraire.

Si vous souhaitez copier et coller, voici le code SASS que j'utilise:

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

merveilleux! Enregistrez le fichier en tant que style.scss dans le répertoire de racine du projet, puis essayons d'exécuter la nouvelle commande:

 <code>npm run sass:build</code>

Une fois cette tâche terminée, vous devez immédiatement voir deux nouveaux fichiers apparaître dans le dossier du projet: style.css et style.css.map .

Si vous préférez, vous pouvez ouvrir le fichier style.css (qui contient du code CSS compilé) pour vérifier que c'est bien ce que nous attendons:

Le package SASS compile même une carte source pour nous, ce qui nous permet de voir quels styles proviennent de quels fichiers .scss lors de la vérification des styles dans les DevTools du navigateur. Génial!

Si vous rencontrez une erreur: Vérifiez la syntaxe dans package.json pour vous assurer qu'il s'agit d'un JSON valide (vous pouvez utiliser le validateur JSON en ligne ici), et votre fichier .scss contient un SASS valide (qui est un convertisseur SASS en ligne). Une autre chose à vérifier est de savoir si le nom de fichier correspond au nom de fichier dans la commande.

Créer des commandes de développement uniquement

C'est bien, mais lorsque nous faisons du développement, nous pouvons nous lasser d'exécuter la commande encore et encore. Alors configurons une deuxième commande, disant à Sass de surveiller le fichier pour nous et de le recompiler automatiquement lorsque nous enregistrons les modifications!

Ajoutez ce qui suit dans l'objet scripts dans package.json :

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

Remarque importante: assurez-vous qu'il existe une virgule (,) entre les deux scripts. L'ordre n'a pas d'importance, mais la virgule entre eux est importante. Encore une fois, JSON est très strict, donc comptez sur le validateur JSON si nécessaire.

Maintenant, si nous exécutons sass:watch (pour ne pas être confondu avec Sasquatch), vous verrez un message dans le terminal qui dit "Sass surveille les modifications. Appuyez sur Ctrl-C pour arrêter".

Si vous ouvrez maintenant le fichier style.scss , apportez des modifications et enregistrez, vous devriez voir un message apparaître automatiquement dans le terminal confirmant que Sass a été recompilé sur CSS:

Maintenant, c'est utile! Non seulement cela, une fois que nous soumettrons ces fichiers à notre référentiel, nous aurons les instructions exactes pour installer et exécuter SASS, et utiliser une commande simple - tout comme toutes les autres personnes impliquées dans ce projet!

Nous allons mettre fin à ce projet de test. Il est utile de voir comment commencer, mais la plupart du temps, vous utiliserez un projet préconfiguré au lieu de créer la commande NPM à partir de zéro, ce que nous ferons dans le dernier chapitre de ce guide NPM.

Instructions finales pour installer le package NPM

Vous devez savoir qu'il existe en fait deux façons d'installer le package NPM, celui que vous souhaitez dépend si le package devrait faire partie de la construction de production, ou qu'il s'agisse de fins de développement purement.

• npm install (ou npm i ) est la méthode standard (et par défaut) pour ajouter des packages aux projets.
• npm install --save-dev (ou npm i -D ) ne fait qu'ajouter des packages à vos «dépendances de développement», ce qui signifie qu'elles ne sont installées que lorsque le projet est développé et non lorsque la version de production finale du projet est construite.

Les packages installés en tant que dépendances de développement peuvent inclure des bibliothèques de test, des outils de vérification de code, des serveurs d'aperçu et d'autres outils qui ne vous aident que pendant le développement. Ils ne sont généralement pas utilisés pour compiler ou exécuter le site Web lui-même.

Il y a aussi un drapeau final à savoir: npm install --global (ou npm i -g ). C'est comment installer le package à l'échelle mondiale, comme nous en avons discuté lors de l'installation de SASS plus tôt. Par exemple, si vous souhaitez pouvoir exécuter sass n'importe où sur la machine, vous pouvez utiliser cette méthode. D'autres cas d'utilisation courants pour les installations globales peuvent inclure l'outil CLI que vous souhaitez utiliser n'importe où, ou même un autre gestionnaire de packages, comme le fil.

Étapes suivantes

Nous sommes sur le point de terminer notre voyage! Une autre chose que vous devez savoir et tout ce dont vous avez besoin pour démarrer rapidement un projet existant à l'aide de NPM. Supposons donc que vous héritez d'un projet à l'aide de NPM. Où avez-vous commencé? Comment vous assurez-vous de continuer à travailler avec les autres? C'est l'objectif de la dernière section de ce guide NPM.

← Chapitre 7 Chapitre 9 →

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!