{"id":232208,"date":"2023-01-12T14:17:00","date_gmt":"2023-01-12T11:17:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232208"},"modified":"2023-01-12T14:17:34","modified_gmt":"2023-01-12T11:17:34","slug":"comment-creer-et-publier-correctement-un-outil-deno-cli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-creer-et-publier-correctement-un-outil-deno-cli\/","title":{"rendered":"Comment cr\u00e9er et publier correctement un outil Deno CLI"},"content":{"rendered":"\n

Une chose int\u00e9ressante \u00e0 propos du framework Ember est qu’il dispose de la CLI Ember pour g\u00e9n\u00e9rer un composant, un mod\u00e8le ou une route. C’est un gain de temps consid\u00e9rable, et plus encore, le ember generate component<\/code>g\u00e9n\u00e8re non seulement le composant mais \u00e9galement un fichier de test pour QUnit. Voyons comment cr\u00e9er un outil Deno CLI pour faire quelque chose de similaire pour React.<\/p>\n

Dans ce didacticiel Deno, nous verrons comment cr\u00e9er un outil CLI Deno avec TypeScript, comment charger les d\u00e9pendances \u00e0 partir de la biblioth\u00e8que standard Deno. Nous allons explorer comment lire un r\u00e9pertoire et \u00e9crire un fichier. Enfin, nous apprendrons \u00e0 publier notre module Deno sur GitHub et \u00e0 l’ex\u00e9cuter directement \u00e0 partir de cet emplacement, ainsi qu’\u00e0 l’installer localement afin qu’il puisse fonctionner sans connexion.<\/p>\n

Aper\u00e7u<\/h2>\n

L’outil CLI que nous allons construire dans ce tutoriel Deno acceptera un nom de composant transmis via la ligne de commande et g\u00e9n\u00e9rera un r\u00e9pertoire et un fichier avec le code d’un composant fonctionnel React.<\/p>\n

J’en ai cr\u00e9\u00e9 une version plus compl\u00e8te qui cr\u00e9e \u00e9galement une feuille de style SASS et un fichier de test adapt\u00e9 \u00e0 Jest et Enzyme. Nous ajouterons bient\u00f4t plus de mod\u00e8les de personnalisation et de composants (comme ceux utilisant des crochets, ou Redux, ou Router, ou tous).<\/p>\n

Par souci de simplicit\u00e9 cependant, ce tutoriel Deno couvrira l’essentiel: lire les param\u00e8tres et \u00e9crire des fichiers et nous n’\u00e9crirons qu’un seul fichier. Le reste est de la manipulation de cha\u00eenes et plus d’\u00e9criture de contenu, rien de particuli\u00e8rement sp\u00e9cial. Vous pouvez acc\u00e9der \u00e0 l’outil Deno CLI complet pour g\u00e9n\u00e9rer un composant React avec SASS et Jest dans le r\u00e9f\u00e9rentiel \u00e0 la fin de cet article.<\/p>\n

Installer Deno<\/h2>\n

Pour ex\u00e9cuter cet outil Deno CLI, vous devez avoir install\u00e9 le runtime. Si vous utilisez d\u00e9j\u00e0 Homebrew sur macOS, vous pouvez rapidement installer Deno avec :<\/p>\n

brew install deno<\/code><\/pre>\n
Si vous n’utilisez pas Homebrew, vous pouvez l’installer en utilisant CURL\u00a0:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
D’autres m\u00e9thodes et syst\u00e8mes d’installation sont d\u00e9crits dans le manuel Deno<\/a>.<\/p>\n
Lire les param\u00e8tres de ligne de commande dans Deno<\/h2>\n
La chose la plus essentielle dont nous avons besoin pour notre g\u00e9n\u00e9rateur est de prendre le nom du composant. Nous devons \u00eatre en mesure de transmettre le nom du composant \u00e0 l’ outil Deno .<\/a> Cr\u00e9ez un r\u00e9pertoire et ajoutez un fichier appel\u00e9 mod.ts<\/code>et collez-le dedans\u00a0:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Maintenant, lorsque vous ajoutez la Deno<\/code>variable, vous recevrez probablement un avertissement, selon votre \u00e9diteur de code et sa prise en charge TypeScript, indiquant qu’il ne peut pas trouver le Deno<\/code>nom. Si vous \u00eates dans VS Code, vous pouvez r\u00e9soudre ce probl\u00e8me en utilisant l’ extension officielle VS Code pour ajouter le support Deno<\/a>. JetBrains a \u00e9galement publi\u00e9 un plugin pour fournir la prise en charge de Deno pour les IDE JetBrain<\/a>.<\/p>\n
Ex\u00e9cutez maintenant ce module avec\u00a0:<\/p>\n
deno run mod.ts<\/code>Bonjour le monde<\/p>\n
Cela r\u00e9pondra avec le param\u00e8tre "HelloWorld" que nous avons pass\u00e9\u00a0:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Agr\u00e9able! \u00c7a marche!<\/p>\n
\u00c9crire des fichiers avec Deno<\/h2>\n
\u00c9crivons le fichier maintenant. Nous avons d’abord besoin de son contenu, alors ajoutez-le au mod.ts<\/code>fichier. Nous utiliserons des litt\u00e9raux de mod\u00e8le JavaScript<\/a> pour cr\u00e9er une seule cha\u00eene et ins\u00e9rer le nom du composant et m\u00eame appeler une m\u00e9thode de cha\u00eene pour la mettre en minuscule :<\/p>\n
const compoContent: string = `import React from 'react';\nimport PropTypes from 'prop-types';\n\n${name}.propTypes = {\n\n};\nfunction ${name}(props) {\n    return();\n}\nexport default ${name};\n`;<\/code><\/pre>\n
Pour \u00e9crire ceci dans un fichier, nous devons d’abord v\u00e9rifier si le r\u00e9pertoire existe. Nous utiliserons la ensureDir<\/code>fonction, qui fait partie de la biblioth\u00e8que standard Deno<\/a>, pour cela. Il cr\u00e9era le r\u00e9pertoire ou les r\u00e9pertoires s’ils n’existent pas. Pour indiquer \u00e0 Deno d’utiliser cette d\u00e9pendance, ajoutez simplement ceci en haut du fichier\u00a0:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Lorsque nous ex\u00e9cuterons notre outil, Deno t\u00e9l\u00e9chargera ce module pour l’utiliser. Il est enfin temps d’\u00e9crire le fichier en utilisant writeTestFile<\/code>, une commande du runtime Deno. Collez ce qui suit \u00e0 la fin du fichier\u00a0:<\/p>\n
const compoPath: string = \".\/app\/components\/\" + compoName + \"\/\";\n\nensureDir(compoPath)\n  .then(() => {\n    Deno.writeTextFile(compoPath + \"index.js\", compoContent);\n    console.info(\"Done!\");\n});<\/code><\/pre>\n
Essai local<\/h2>\n
Nous avons fini de coder notre outil Deno CLI et nous pouvons maintenant le tester. Deno est con\u00e7u comme un environnement d’ex\u00e9cution s\u00e9curis\u00e9 d’abord, de sorte que les op\u00e9rations telles que la lecture du syst\u00e8me de fichiers ou l’\u00e9criture sur celui-ci sont refus\u00e9es par d\u00e9faut. Vous devez demander explicitement \u00e0 Deno d’autoriser l’acc\u00e8s au syst\u00e8me de fichiers. Il est s\u00e9par\u00e9 en acc\u00e8s en lecture et en acc\u00e8s en \u00e9criture. Dans ce cas, nous avons besoin d’une autorisation de lecture, car nous devons ensureDir<\/code>d’abord lire le r\u00e9pertoire et v\u00e9rifier s’il existe. Si ce n’est pas le cas, il le cr\u00e9era, puis nous cr\u00e9erons le fichier. Pour les deux derni\u00e8res t\u00e2ches, nous avons besoin d’une autorisation d’\u00e9criture. Voici donc comment vous pouvez l’ex\u00e9cuter\u00a0:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
Et vous aurez les r\u00e9pertoires cr\u00e9\u00e9s avec le fichier, tous relatifs au dossier dans lequel vous ex\u00e9cutez ceci, comme app\/components\/Button\/index.js<\/code>.<\/p>\n
Publier un module Deno<\/h2>\n
Distribuer un module Deno est simple. Nous avons couvert cela en d\u00e9tail dans un article pr\u00e9c\u00e9dent sur la cr\u00e9ation et la publication d’un module Deno sur GitHub<\/a>. Vous devez initialiser un d\u00e9p\u00f4t git local\u00a0:<\/p>\n
git init<\/code><\/p>\n
ajoutez et validez vos fichiers\u00a0:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
cr\u00e9ez un r\u00e9f\u00e9rentiel sur GitHub ou un service similaire, et poussez-le. Par exemple, si vous cr\u00e9ez un r\u00e9f\u00e9rentiel nomm\u00e9 a-deno-module<\/code>sur GitHub, vous pouvez l’ex\u00e9cuter localement pour le mettre en ligne\u00a0:<\/p>\n
git remote add origin git@github.com:YOUR-GITHUB-USER\/a-deno-module.git<br>git push -u origin master<\/code><\/p>\n
Utiliser le module publi\u00e9 en ligne<\/h2>\n
Deno peut ex\u00e9cuter des modules directement depuis Internet et installer ses d\u00e9pendances automatiquement. Maintenant qu’il est d\u00e9ploy\u00e9, vous pouvez ex\u00e9cuter notre outil Deno CLI directement depuis GitHub\u00a0:<\/p>\n
deno run --allow-read --allow-write https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts button<\/code><\/pre>\n
Deno t\u00e9l\u00e9chargera l’outil, v\u00e9rifiera les d\u00e9pendances et les installera si n\u00e9cessaire. Le r\u00e9sultat sera le m\u00eame que ci-dessus, il cr\u00e9era les r\u00e9pertoires et le fichier.<\/p>\n
Pour \u00e9viter d’avoir \u00e0 \u00e9crire tout \u00e7a (ou \u00e0 le chercher dans le shell) Deno permet d’installer cet outil pour qu’il fonctionne hors ligne :<\/p>\n
deno install --allow-read --allow-write --name denomodu https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts<\/code><\/pre>\n
L’outil sera nomm\u00e9 denomodu<\/code>. Cela consiste \u00e0 cr\u00e9er un fichier ex\u00e9cutable avec la ligne de commande dans un certain r\u00e9pertoire, comme \/Users\/%your-username%\/.deno\/bin<\/code>dans macOS. Son contenu est la commande pour ex\u00e9cuter l’outil et accepter les param\u00e8tres\u00a0:<\/p>\n
#!\/bin\/sh\n\ndeno \"run\" \"--allow-read\" \"--allow-write\" \"https:\/\/raw.githubusercontent.com\/eliorivero\/react-generate-component\/master\/mod.ts\" \"$@\"<\/code><\/pre>\n
Ainsi, une fois le processus termin\u00e9, si vous n’avez pas ajout\u00e9 le .\/deno\/bin<\/code>chemin d’acc\u00e8s \u00e0 votre variable d’environnement PATH, Deno vous invitera \u00e0 le faire afin que vous puissiez ex\u00e9cuter l’outil.<\/p>\n
Une fois que vous avez ajout\u00e9 le chemin \u00e0 votre variable PATH, vous pouvez maintenant appeler l’outil\u00a0:<\/p>\n
denomodu button<\/code><\/p>\n
C’est beaucoup plus court et maintenant \u00e7a marche sans \u00eatre connect\u00e9 \u00e0 Internet. Toutes nos f\u00e9licitations! Vous avez cr\u00e9\u00e9 un outil Deno CLI, vous l’avez publi\u00e9 et install\u00e9 localement.<\/p>\n
Outil Deno CLI pour g\u00e9n\u00e9rer un composant React<\/h2>\n
Comme mentionn\u00e9 au d\u00e9but de ce tutoriel Deno, j’en ai cr\u00e9\u00e9 une version plus compl\u00e8te, et vous pouvez acc\u00e9der au d\u00e9p\u00f4t de cet outil ici :<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
C’est un seul module Deno cr\u00e9\u00e9 sur TypeScript et cr\u00e9e ces fichiers\u00a0:<\/p>\n