Criando sua própria CLI com Gluegun

Criando components React de forma automatizada

Sabe o NPM ou YARN que utilizamos pra criarmos nossos projetos. Pois bem, vamos criar nossa propria CLI utilizando o framework Gluegun, e vamos criar um gerador de componentes para React, mas você pode utilizar para qualquer outra otimização que achar necessária.

Instalando o Gluegun

Se tiver o node instalado em seu ambiente local, podemos rodar o seguinte comando para criar nossa CLI:

npx gluegun new becatriz

Ao rodar o comando acima, você terá que escolher entre utilizar TypeScript ou JavaScript. Após escolhar sua CLI será criada. Entre dentro da pasta com nome da sua CLI e rode o comando:

yarn link

Esse comando irá fazer um link entre a CLI criada e seu workspace global do yarn. Desa forma poderá rodar o comando no terminal com o nome da sua CLI e será apresentada a seguite mensagem:

Welcome to your CLI

Pronto, tudo certo para começarmos a configurar nossa CLI.

Adicionando configurações personalizadas em nossa CLI

Em nossa pasta src temos o arquivo cli.js, onde podemos ver várias configurações dentre elas os comandos default, como help, version e create. Vamos agora para a pasta src/commands. Todos os arquivos ali dentro são comandos. Então basicamente se quisermos criar um novo comando é dentro dessa pasta que iremos adicionar.

Vamos criar um novo arquivo dessa forma:

generate:component.js

Isso porque ao rodar a CLI, ficará bem claro o que o comando irá fazer.

Vamos adicionar uma configuração bem simples para entedermos como funciona a CLI.

Se rodarmos no terminal:

becatriz generate:component

Será exbido “Executou”

Se rodarmos também

becatriz gc

Será exbido “Executou”, pois é o alias que foi configurado no comando.

Podemos ver também que o comando já faz parte da CLI, ao rodarmos:

becatriz -h

Sera exibido todos commando que podemos usar:

Tudo certo até agora. Vamos criar nosso template de componentes.

Criando templates para os componentes

Dentro da pasta src/templates, vamos adicionar um novo arquivo:

component.js.ejs

A extensão .ejs, permite que adicionemos passagem de parâmetros. Dentro do arquivo vamos adicionar um template que será condizente como quando criamos um componente em React

import React from 'react'

export default function <%= props.name %>(){
    return(
        <div/>
    )
}

Observe acima que o nome do componente será passado como props (props.name).

Voltando lá no arquivo generate:component.js vamos adicionar novas configurações:

Agora verificamos se o usuário irá passar o primeiro parâmetro com o nome do componente. Caso não, interrompemos a função e exibimos uma mensagem de erro. Caso, tenha o nome, continuamos a função. Vamos analisar melhor o que cada linha quer dizer:

template: será o nome do arquivo de onde configurações o template do componente React

target: será onde queremos que seja criado o componente ao rodarmos a CLI. Lembrando que esse caminho será na máquina do usuário

props: parâmetro que será recebido passando o nome do componente.

Caso tudo dê certo, será exibido a mensagem de sucesso, informando que o o component foi criado.

Pode verificar que dentro da src/components/Form na sua máquina foi criada uma pasta components e dentro temos um index.js como template do componente react criado e com o nome correto:

Criando um template para nossos estilos CSS

Vamos agora criar um estilo para noss CSS, baseado em styled components. Na pasta templates vamos criar um novo arquivo:

styles.js.ejs

Dentro dele vamos fazer a seguinte configuração:

import styled from 'styled-components'

export const Container = styled.div`
  display: flex;
  flex-direction: row;
`

E agora lá em nosso generate:component.js vamos adicionar mais uma configuração:

Obseve agora que adicionamos a linha 27 a 30. Basicamente fazemos o mesmo que fizemos para o componente mas agora para o estilo. Template e target são alterados e não precisamos mais das props, pois não passaremos nada para dentro do templete.

Ao executarmos novamente o comando becatriz generate:component Form, podemos ver que agora será criado dentro da pasta src/components, a pasta Form com o index.js + style.js

E dentro de cada arquivo estará o template respectivo que criamos.

Publicando nosso pacote no NPM

Vamos publicar nosso pacote para ser utilizado por outras pessoas. Para isso você precisar ter uma conta no https://www.npmjs.com/. Depois de criar a conta, em seu terminal, na raiz do projeto, digite:

npm publish

Lemrbando que no package.json do projeto da CLI, a variavém private: true, precisa ser retirada, pois esse pacote será acessível a todas as pessoas que quiserem utilizar.

Será necessário preencher as informações solicitadas: name, password e códgo para login. Depois só aguardar que nosso pacote estará publicado.

Para testar, rode no terminal:

yarn global add becatriz

Dessa forma, se dermos esse comando em qualquer local do terminal:

becatriz -h

Será exibido os comandos da CLI que poderemos utilizar

Conclusão

Se você deseja automatizar construções de arquivos em seu projeto, ou até mesmo, baixar o projeto de outro local no github (fica de tarefa para você pesquisar), essa ferramenta Gluegun é muito simples e poderosa para se usar. Assim, podemos economizar tempo e padronizar a criação de componentes , páginas, projeto etc, entre o time todo.

Referência:

• https://github.com/infinitered/gluegun: Gluegun
• https://www.youtube.com/watch?v=Rt-xG_VzD6M : Criando uma CLI com NodeJS e Gluegun | Diego Fernandes