{"id":232294,"date":"2023-01-12T14:16:00","date_gmt":"2023-01-12T11:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232294"},"modified":"2023-01-12T14:20:19","modified_gmt":"2023-01-12T11:20:19","slug":"como-criar-e-publicar-corretamente-uma-ferramenta-deno-cli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-criar-e-publicar-corretamente-uma-ferramenta-deno-cli\/","title":{"rendered":"Como criar e publicar corretamente uma ferramenta Deno CLI"},"content":{"rendered":"\n

Uma coisa legal sobre o framework Ember \u00e9 que ele tem a CLI do Ember para gerar um componente, um template ou uma rota. \u00c9 uma grande economia de tempo e, mais ainda, ember generate component<\/code>gera n\u00e3o apenas o componente, mas tamb\u00e9m um arquivo de teste para o QUnit. Vamos ver como criar uma ferramenta Deno CLI para fazer algo semelhante para React.<\/p>\n

Neste tutorial do Deno, veremos como criar uma ferramenta Deno CLI com TypeScript, como carregar depend\u00eancias da biblioteca padr\u00e3o do Deno. Vamos explorar como ler um diret\u00f3rio e escrever um arquivo. Por fim, aprenderemos a publicar nosso m\u00f3dulo Deno no GitHub e execut\u00e1-lo diretamente desse local e tamb\u00e9m a instal\u00e1-lo localmente para que funcione sem conex\u00e3o.<\/p>\n

Vis\u00e3o geral<\/h2>\n

A ferramenta CLI que construiremos neste tutorial do Deno aceitar\u00e1 um nome de componente passado pela linha de comando e gerar\u00e1 um diret\u00f3rio e um arquivo com o c\u00f3digo para um componente funcional React.<\/p>\n

Eu criei uma vers\u00e3o mais completa disso que tamb\u00e9m cria uma folha de estilo SASS e um arquivo de teste adequado para Jest e Enzyme. Em breve, adicionaremos mais modelos de personaliza\u00e7\u00e3o e componentes (como aqueles que usam ganchos, Redux, Roteador ou todos eles).<\/p>\n

Por uma quest\u00e3o de simplicidade, por\u00e9m, este tutorial do Deno cobrir\u00e1 o essencial: leitura de par\u00e2metros e grava\u00e7\u00e3o de arquivos e escreveremos um \u00fanico arquivo. O resto \u00e9 manipula\u00e7\u00e3o de strings e mais escrita de conte\u00fado, nada particularmente especial. Voc\u00ea pode acessar a ferramenta Deno CLI completa para gerar um componente React com SASS e Jest no reposit\u00f3rio no final deste artigo.<\/p>\n

Instalar Deno<\/h2>\n

Para executar esta ferramenta Deno CLI, voc\u00ea precisa ter o runtime instalado. Se voc\u00ea j\u00e1 estiver usando o Homebrew no macOS, poder\u00e1 instalar rapidamente o Deno com:<\/p>\n

brew install deno<\/code><\/pre>\n
Se voc\u00ea n\u00e3o estiver usando o Homebrew, poder\u00e1 instal\u00e1-lo usando o CURL:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Outros m\u00e9todos e sistemas de instala\u00e7\u00e3o est\u00e3o descritos no Manual Deno<\/a>.<\/p>\n
Ler par\u00e2metros de linha de comando no Deno<\/h2>\n
A coisa mais essencial que precisamos para o nosso gerador \u00e9 levar o nome do componente. Precisamos ser capazes de passar o nome do componente para a ferramenta Deno .<\/a> Crie um diret\u00f3rio e adicione um arquivo chamado mod.ts<\/code>e cole isso nele:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Agora, quando voc\u00ea adiciona a Deno<\/code>vari\u00e1vel, provavelmente receber\u00e1 um aviso, dependendo do seu editor de c\u00f3digo e do suporte a TypeScript, dizendo que n\u00e3o pode encontrar o Deno<\/code>nome. Se voc\u00ea estiver no VS Code, poder\u00e1 resolver isso usando a extens\u00e3o oficial do VS Code para adicionar suporte ao Deno<\/a>. JetBrains tamb\u00e9m publicou um plugin para fornecer suporte Deno para JetBrain IDEs<\/a>.<\/p>\n
Agora execute este m\u00f3dulo com:<\/p>\n
deno run mod.ts<\/code>Ol\u00e1 Mundo<\/p>\n
Isso responder\u00e1 com o par\u00e2metro "HelloWorld" que passamos:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Agrad\u00e1vel! Est\u00e1 funcionando!<\/p>\n
Gravar arquivos com Deno<\/h2>\n
Vamos escrever o arquivo agora. Primeiro precisamos do conte\u00fado para ele, ent\u00e3o adicione isso ao mod.ts<\/code>arquivo. Usaremos literais de modelo JavaScript<\/a> para criar uma \u00fanica string e inserir o nome do componente e at\u00e9 chamar um m\u00e9todo de string para torn\u00e1-lo min\u00fasculo:<\/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
Para gravar isso em um arquivo, primeiro precisamos verificar se o diret\u00f3rio existe. Usaremos a ensureDir<\/code>fun\u00e7\u00e3o, parte da biblioteca padr\u00e3o Deno<\/a>, para isso. Ele criar\u00e1 o diret\u00f3rio ou diret\u00f3rios se eles n\u00e3o existirem. Para dizer ao Deno para usar essa depend\u00eancia, basta adicionar isso no topo do arquivo:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Quando executarmos nossa ferramenta, o Deno baixar\u00e1 este m\u00f3dulo para us\u00e1-lo. Finalmente \u00e9 hora de escrever o arquivo usando writeTestFile<\/code>, um comando no runtime do Deno. Cole o seguinte no final do arquivo:<\/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
Teste local<\/h2>\n
Terminamos de codificar nossa ferramenta Deno CLI e agora podemos test\u00e1-la. O Deno \u00e9 constru\u00eddo como um tempo de execu\u00e7\u00e3o seguro, portanto, opera\u00e7\u00f5es como ler o sistema de arquivos ou gravar nele s\u00e3o negadas por padr\u00e3o. Voc\u00ea precisa pedir explicitamente ao Deno para permitir o acesso ao sistema de arquivos. \u00c9 separado em acesso de leitura e acesso de grava\u00e7\u00e3o. Neste caso, precisamos de permiss\u00e3o de leitura, pois ensureDir<\/code>primeiro precisamos ler o diret\u00f3rio e verificar se ele existe. Se n\u00e3o, ele ir\u00e1 cri\u00e1-lo e, em seguida, criaremos o arquivo. Para as duas \u00faltimas tarefas, precisamos de permiss\u00e3o de grava\u00e7\u00e3o. Ent\u00e3o \u00e9 assim que voc\u00ea pode execut\u00e1-lo:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
E voc\u00ea ter\u00e1 os diret\u00f3rios criados junto com o arquivo, todos relativos \u00e0 pasta onde voc\u00ea est\u00e1 executando isso, como app\/components\/Button\/index.js<\/code>.<\/p>\n
Publicar um m\u00f3dulo Deno<\/h2>\n
Distribuir um m\u00f3dulo Deno \u00e9 simples. Cobrimos isso em detalhes em um post anterior sobre como criar e publicar um m\u00f3dulo Deno no GitHub<\/a>. Voc\u00ea precisa inicializar um reposit\u00f3rio git local:<\/p>\n
git init<\/code><\/p>\n
adicione e confirme seus arquivos:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
crie um reposit\u00f3rio no GitHub ou servi\u00e7o semelhante e envie-o por push. Por exemplo, se voc\u00ea criar um reposit\u00f3rio chamado a-deno-module<\/code>no GitHub, poder\u00e1 execut\u00e1-lo localmente para envi\u00e1-lo online:<\/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
Use o m\u00f3dulo publicado online<\/h2>\n
Deno pode executar m\u00f3dulos diretamente da Internet e instalar suas depend\u00eancias automaticamente. Agora que est\u00e1 implantado, voc\u00ea pode executar nossa ferramenta Deno CLI diretamente do GitHub:<\/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 far\u00e1 o download da ferramenta, verificar\u00e1 as depend\u00eancias e as instalar\u00e1, se necess\u00e1rio. O resultado ser\u00e1 o mesmo que acima, ele criar\u00e1 os diret\u00f3rios e o arquivo.<\/p>\n
Para evitar ter que escrever tudo isso (ou procur\u00e1-lo no shell), o Deno permite que voc\u00ea instale esta ferramenta para que funcione offline:<\/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
A ferramenta ser\u00e1 nomeada denomodu<\/code>. O que isso faz \u00e9 criar um arquivo execut\u00e1vel com a linha de comando em um determinado diret\u00f3rio, como \/Users\/%your-username%\/.deno\/bin<\/code>no macOS. Seu conte\u00fado \u00e9 o comando para executar a ferramenta e aceitar par\u00e2metros:<\/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
Ent\u00e3o, quando o processo terminar, se voc\u00ea n\u00e3o adicionou o .\/deno\/bin<\/code>caminho \u00e0 sua vari\u00e1vel de ambiente PATH, o Deno solicitar\u00e1 que voc\u00ea fa\u00e7a isso, para que voc\u00ea possa executar a ferramenta.<\/p>\n
Depois de adicionar o caminho \u00e0 sua vari\u00e1vel PATH, agora voc\u00ea pode invocar a ferramenta:<\/p>\n
denomodu button<\/code><\/p>\n
\u00c9 muito mais curto e agora funciona sem estar conectado \u00e0 Internet. Parab\u00e9ns! Voc\u00ea criou uma ferramenta Deno CLI, publicou-a e instalou-a localmente.<\/p>\n
Ferramenta Deno CLI para gerar um componente React<\/h2>\n
Como mencionado no in\u00edcio deste tutorial do Deno, criei uma vers\u00e3o mais completa disso, e voc\u00ea pode acessar o reposit\u00f3rio dessa ferramenta aqui:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
\u00c9 apenas um m\u00f3dulo Deno criado no TypeScript e cria esses arquivos:<\/p>\n