Plop.js: automatizando a criação de arquivos

No dia a dia do desenvolvimento frontend, trabalhando com frameworks como React, Vue e Angular, precisamos criar diversos arquivos de componentes. Geralmente, esses componentes vem acompanhado de um arquivo de estilos, outro de testes e todos eles têm uma mesma estrutura inicial. E sempre que precisamos criar um novo componente, precisamos repetir esse mesmo processo. Uma solução para esse problema é o Plop.js.

[adrotate banner=”4″]

Recentemente, encontrei essa ferramenta muito útil que facilita a criação de arquivos através de uma interface de linha de comando.

Neste artigo, veremos como podemos automatizar a criação de componentes em uma aplicação React utilizando o Plop.js.

O que é Plop.js?

Plop.js é um micro-generator framework, uma ferramenta que oferece uma maneira simples de gerar código ou qualquer outro tipo de arquivo de texto simples de maneira consistente.

Ele fornece uma API de alto nível e, ao mesmo tempo, muito personalizável. Além disso, no Plop.js não estamos limitados apenas a componentes. Isto é, podemos gerar containers, services, hooks, reducers, actions, utilities, docs, readme e muito mais.

Configuração do projeto

O projeto que criaremos a seguir como exemplo é uma aplicação básica criada com React, TypeScript e Styled-Components.

O exemplo de geração de arquivos é para criação de componentes. Então, se você precisa criar outros arquivos, como hooks, é necessário a criação de novas pastas e arquivos, conforme explicado no exemplo do componente.

Seguiremos a seguinte estrutura para criação dos nossos componentes:

Plop.js: automatizando a criação de arquivos Luby Software
  • index.tsx: arquivo do nosso componente;
  • styles.ts: arquivo de estilos, utilizando styled-components.

Instalando o Plop.js

Rode o seguinte comando no terminal:

Plop.js: automatizando a criação de arquivos Luby Software

Em seguida, crie um arquivo plopfile.js na raiz do seu projeto.

Plop.js: automatizando a criação de arquivos Luby Software

Agora, precisamos também criar o template que servirá de base para criação dos nossos componentes. Podemos criar uma pasta chamada templates, na raiz do projeto, e adicionar o arquivo component.tsx.hbs.

Assim, utilizaremos HandleBars.js para criar nossos templates.

Plop.js: automatizando a criação de arquivos Luby Software

No package.json, adicione o seguinte comando:

Plop.js: automatizando a criação de arquivos Luby Software

Após isso, é só rodar o comando acima no terminal que o prompt pedirá ao usuário que insira o nome do componente.

Plop.js: automatizando a criação de arquivos Luby Software

Neste momento, basta inserir o nome do componente, clicar em enter e pronto, o plop.js irá gerar nosso arquivo do componente.

Plop.js: automatizando a criação de arquivos Luby Software

Bem simples né?! Agora só precisamos adicionar uma nova ação no arquivo plopfile.js para que seja possível gerarmos o arquivo styles.ts junto com o arquivo do nosso componente.

Para fazer isso, basta adicionarmos uma nova ação no arquivo plopfile.js, como no exemplo abaixo:

Plop.js: automatizando a criação de arquivos Luby Software

Em seguida, iremos criar um arquivo styles.ts.hbs dentro da pasta templates. Este será nosso template base para o arquivo styles.ts. Dessa forma:

Plop.js: automatizando a criação de arquivos Luby Software

Após finalizada a configuração no arquivo plopfile.js e também a criação do template, podemos rodar o comando para criar um novo componente. Dessa vez, ele criará tanto o arquivo index.tsx quanto o arquivo styles.ts.

Plop.js: automatizando a criação de arquivos Luby Software

Como podemos ver acima, os dois arquivos foram criados com uma estrutura de código inicial definida.

Veja também:

Como desenvolver um software de radar meteorológico

Conclusão

Automatizar processos repetitivos é uma forma de aumentarmos nossa produtividade e facilitarmos nosso trabalho. Com o Plop.js podemos gerar arquivos de forma rápida e consistente.

Autor: Luiz Gustavo Santos.

[adrotate banner=”5″]

Rodrigo Gardin

Rodrigo Gardin

CTO da Luby

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco​

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

AWS certifications - AWS Partner
AWS certifications - Solutions Architect
Azure logo - Certifications Luby
Google Cloud Partner logo, a symbol of Luby's certifications and recognitions collaboration with Google.
Copyright ©2024 Luby Software LLC. All rights reserved.
Rolar para cima