Comment créer votre propre CLI TypeScript - avec Node.js

Préparez-vous à apprendre à faire une simple CLI «Pizza» avec ce guide

Obtenez rPhoto par NordWood Thèmes sur Unsplash

Dans ce guide, allons-nous créer une petite interface de ligne de commande de pizza dans TypeScript avec Node.js. Après avoir suivi toutes les étapes, vous obtenez une interface de ligne de commande entièrement opérationnelle, vous devez avoir une idée de la configuration et de la création d’une interface personnalisée pour vous-même.

Commencez par créer un package.json et tsconfig.json

Tout d'abord, nous allons initialiser un package.json avec npm init. Vous pouvez choisir vous-même un nom, un auteur, une version, une description, des mots-clés et une licence.

les dépendances

  • clear - Efface notre écran de terminal
  • figlet - Obtenez une belle illustration ASCII d'une chaîne
  • craie - Style des cordes terminales bien fait
  • commander - Facilite les interfaces de ligne de commande node.js
  • chemin - module de chemin Node.JS

Nous devons installer toutes nos dépendances:

npm i efface le chemin du commandant de la craie - économise

devDependencies

  • types / node - Définitions TypeScript pour Node.js
  • nodemon - Script de moniteur simple lors du développement d'une application node.js
  • ts-node - Environnement d'exécution TypeScript et REPL pour node.js
  • typescript - Un langage pour le développement de JavaScript à l'échelle des applications

Suivi en installant nos devDependencies:

npm i @ types / noeud nodemon ts-noeud typescript --save-dev

Bin et principal

Dans notre package.json, nous devons définir le point d'entrée de notre application (principale et bin). Ce sera notre fichier index.js compilé dans le dossier lib: ./lib/index.js.

Le mot pizza est la commande que vous utilisez pour éventuellement vous appeler CLI.

"main": "./lib/index.js",
"poubelle": {
  "pizza": "./lib/index.js"
}

Les scripts

Nous avons maintenant besoin de scripts pour nous faciliter la tâche. Nous avons cinq scripts:

  • npm start - vous pouvez regarder votre CLI tout de suite
  • npm run create - exécute notre script de construction et de test ensemble.
  • npm run build: compile notre fichier TypeScriptindex.ts en index.js et index.d.ts.
  • npm run test - Installation globale de notre interface de ligne de commande avec sudo npm i -g, suivie de l'activation de notre commande pizza CLI.
  • npm run refresh - supprime les modules de noeud, package-lock.json et exécute l'installation de npm.

Collez ce qui suit dans le package.json:

"scripts": {
  "start": "nodemon --watch" src / ** / *. ts "--exec" ts-node "src / index.ts",
  "create": "npm run build && npm exécuter le test",
  "build": "tsc -p.",
  "test": "sudo npm i -g && pizza",
  "refresh": "rm -rf ./node_modules ./package-lock.json && npm install"
},

TSconfig

Pour notre CLI, certaines configurations TypesSript sont définies dans un fichier nommé tsconfig.json, créons ce fichier à la racine et copiez-y les configurations suivantes:

{
  "compilerOptions": {
    "cible": "es5",
    "module": "commonjs",
    "lib": ["es6", "es2015", "dom"],
    "déclaration": true,
    "outDir": "lib",
    "rootDir": "src",
    "strict": vrai,
    "types": ["noeud"],
    "esModuleInterop": true,
    "resolutJsonModule": true
  }
}

Commençons maintenant à créer la CLI

Environnement

Créez un fichier nommé index.ts dans ce dossier. Au sommet de notre fichier index.ts nous avons:

#! / usr / bin / env noeud

«Il s'agit d'une instance d'une ligne shebang: la toute première ligne d'un fichier en texte brut exécutable sur des plates-formes de type Unix qui indique au système à quel interpréteur transmettre ce fichier pour exécution, via la ligne de commande suivant le code magique #! préfixe (appelé shebang). ”- Débordement de pile

Importations

Ensuite, nous avons besoin d’importations pour utiliser nos dépendances:

const chalk = require ('craie');
const clear = require ('clear');
const figlet = require ('figlet');
const path = require ('path');
const programme = require ('commander');

Une jolie bannière

Nous appelons ensuite clear (pour effacer notre ligne de commande chaque fois que nous appelons notre commande pizza). Ensuite, nous souhaitons consigner une grande bannière: un texte de couleur rouge (pizza-cli ’), à l’aide de figue et de craie.

clair();
console.log (
  craie.red (
    figlet.textSync ('pizza-cli', {horizontalLayout: 'complet'})
  )
)

Cela ressemblera à ceci:

  _ __ (_) ____ ____ __ _ ___ | | (_)
 | '_ \ | | | _ / | _ / / _` | _____ / __ | | | | |
 | | _) | | | / / / / | (_ | | | | _____ | | (__ | | | |
 | .__ / | _ | / ___ | / ___ | \ __, _ | \ ___ | | _ | | _ |
 | _ |

Notre CLI avec options

Nous en sommes maintenant à la partie où nous pouvons rendre notre interface de ligne de commande interactive. Nous utilisons le programme. Nous pouvons définir ici notre version CLI, notre description, diverses options et analyser le résultat. Les options contiennent une variante courte et une variante longue, par exemple: pour ajouter des poivrons, nous pouvons utiliser pizza -p ou pizza -peppers.

programme
  .version ('0.0.1')
  .description ("Un exemple de CLI pour commander des pizzas")
  .option ('- p, --peppers', 'Ajouter des poivrons')
  .option ('- P, --pineapple', 'Ajouter ananas')
  .option ('- b, --bbq', 'Ajouter de la sauce barbecue')
  .option ('- c, --cheese ', 'Ajouter le type de fromage spécifié [marbre]')
  .option ('- C, --no-cheese', 'Vous ne voulez pas de fromage')
  .parse (process.argv);

Pour voir ce que nous avons actuellement, lancez npm run build suivi de npm start, vous verrez ceci:

  _ __ (_) ____ ____ __ _ ___ | | (_)
 | '_ \ | | | _ / | _ / / _` | _____ / __ | | | | |
 | | _) | | | / / / / | (_ | | | | _____ | | (__ | | | |
 | .__ / | _ | / ___ | / ___ | \ __, _ | \ ___ | | _ | | _ |
 | _ |
Utilisation: pizza [options]
Un exemple CLI pour commander des pizzas
Les options:
  -V, --version affiche le numéro de version
  -p, --peppers Ajoutez des poivrons
  -P, --pineapple Ajouter ananas
  -b, --bbq Ajouter la sauce barbecue
  -c, --cheese  Ajouter le type de fromage spécifié [marbre]
  -C, --no-cheese Vous ne voulez pas de fromage

La dernière partie

Nous voulons que les utilisateurs voient ce qu'ils ont commandé et que leurs options soient mises à jour après avoir effectué des choix différents.

console.log ('vous avez commandé une pizza avec:');
if (program.peppers) console.log ('- poivrons');
if (programme.pineapple) console.log ('- ananas');
if (program.bbq) console.log ('- bbq');
const cheese: string = true === program.cheese? 'marbre': programme.cheese || 'non';
console.log ('-% s cheese', fromage);

Avec ce code, les utilisateurs peuvent utiliser pizza -h pour obtenir des informations sur nos options.

if (! process.argv.slice (2) .length) {
  program.outputHelp ();
}

Après avoir obtenu tout notre code dans le fichier index.ts, nous pouvons exécuter npm run create pour tester notre interface de ligne de commande dans la ligne de commande. Vous verrez notre résultat final:

          _ _ _
  _ __ (_) ____ ____ __ _ ___ | | (_)
 | '_ \ | | | _ / | _ / / _` | _____ / __ | | | | |
 | | _) | | | / / / / | (_ | | | | _____ | | (__ | | | |
 | .__ / | _ | / ___ | / ___ | \ __, _ | \ ___ | | _ | | _ |
 | _ |
vous avez commandé une pizza avec:
  - fromage marbré
Utilisation: pizza [options]
Un exemple CLI pour commander des pizzas
Les options:
  -V, --version affiche le numéro de version
  -p, --peppers Ajoutez des poivrons
  -P, --pineapple Ajouter ananas
  -b, --bbq Ajouter la sauce barbecue
  -c, --cheese  Ajouter le type de fromage spécifié [marbre]
  -C, --no-cheese Vous ne voulez pas de fromage
  -h, --help informations sur l'utilisation de la sortie

Publier sur NPM?

Vous pouvez choisir de publier votre CLI sur npm, j’ai choisi d’appeler le nom du projet ‘pizza-cli’ dans package.json. Si j’exécutais npm publish, il serait publié dans le registre npm (mais ce n’était pas le cas, mais vous pourriez le faire). D'autres personnes pourraient installer mon projet globalement en exécutant npm i pizza-cli -g, puis en utilisant la commande pizza pour que la CLI soit opérationnelle!

Une fonctionnalité intéressante à ajouter vous-même serait d'utiliser: Inquirer. Avec cela, vous pouvez poser des questions aux utilisateurs pour qu'ils complètent les informations, de la même manière que la commande: npm init par exemple.

Merci pour la lecture! Mon Github. Voici le code source complet de cette CLI et quelques-uns de mes autres articles: