Plop.js - Automatize a criação de arquivos \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 05 Horas 56 Min 42 Seg Tempo restante da oferta: 05 56 42 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Plop.js - Automatize a criação de arquivos [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) # Plop.js - Automatize a criação de arquivos O Plop.js facilita a criação de arquivos em seus projetos, evitando que você tenha sempre que escrever código repetido para iniciar uma estrutura. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/Plop.js-Automatize-a-criação-de-arquivos.png) Olá Web Developers! Vamos conhecer o Plop.js, uma ferramenta incrível que nos permite automatizar a geração de arquivos em nossos projetos. Se você já precisou copiar o conteúdo de um arquivo já existente para criar outro, você precisa conhecer esta ferramenta! ## Entendendo o problema Caso você já tenha trabalhado com [Angular](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve/ "Angular"), sabe que ele possui comandos do próprio `Angular-CLI` para gerar services, pipes, classes, modules, etc. Por exemplo, se você precisar criar um Service, basta executar o comando para criá-lo. Assim será gerado automaticamente um arquivo com o nome do seu service, com código contendo o service com o nome que você escolheu, e ele automaticamente será inserido no seu módulo (atualização de arquivo). Ou seja, com um simples comando você terá arquivos sendo criados e atualizados, já com o conteúdo pronto para você começar a programar. Então te poupa o trabalho de ter que escrever declarações repetitivas. ``` ng generate service hero ``` ```js import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class HeroService { constructor() { } } ``` Porém, não temos essa praticidade em qualquer lugar. Um ótimo exemplo é quando trabalhamos com [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React"). Por ser uma biblioteca, ele não é tão opinativo quanto frameworks como o Angular. Em resumo, cada um pode criar sua própria estrutura, modo de escrever seus códigos, bibliotecas, etc. Esta é uma das [diferenças entre bibliotecas e frameworks](https://www.treinaweb.com.br/blog/qual-a-diferenca-entre-framework-e-biblioteca/ "diferenças entre bibliotecas e frameworks"). Por consequência, não temos uma ferramenta que gere arquivos para nós. Isso muitas vezes faz com que a gente acabe criando um arquivo vazio e escrevendo tudo, ou até mesmo copiando um arquivo existente para acelerar um pouco. Com o `Plop.js` você economiza aqueles 5 minutos para cada arquivo criado, seja rota, componente, controller, arquivo de teste, etc. ## Plop.js vem ao resgate! Uma vez que seu projeto começa a crescer, é preciso ter uma boa estrutura, organização e padrões. Também é importante que todos do time sigam esse mesmo padrão. Com o intuito de resolver isso, o `Plop.js` nos permite criar comandos que vão gerar arquivos com a estrutura que queremos de forma bem simples! Grandes empresas utilizam o Plop.js, como Microsoft, PayPal, Adobe e Mozilla. A imagem abaixo mostra o `Plop.js` sendo iniciado em um projeto React, me perguntando se quero criar um componente, serviço, hook ou uma estrutura para [Redux](https://www.treinaweb.com.br/blog/o-que-e-redux/ "Redux")-Saga (action, reducer e saga). ![Plop.js - Escolhendo gerador](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/plopjs-choose-generator.png) [ ![Nest.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/nest-js.svg) Curso Nest.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-fundamentos) ## Instalando o Plop.js Primeiro precisamos instalar o Plop.js em nosso projeto. Execute o comando: ``` npm install --save-dev plop ``` No `package.json` vamos adicionar um comando para iniciar o Plop! ```json { ... "scripts": { "plop": "plop" } } ``` Agora poderemos iniciar o Plop.js com o comando `npm run plop`. ## Iniciando seu primeiro gerador Crie na raiz do seu projeto um arquivo com o nome `plopfile.js` com o seguinte conteúdo: ```js module.exports = function (plop) { }; ``` Estamos expondo uma função que o `Plop.js` vai executar e passar para ela o objeto `plop` como parâmetro. Este objeto possui várias funções a fim de nos permitir criar nossos geradores. Já podemos criar os geradores dentro desta função. No entanto, em projetos grandes isso vai gerar uma bagunça. Portanto, prefira criar um arquivo para cada gerador. Por isso, vamos criar uma pasta chamada `plop` e dentro vamos criar um arquivo chamado `hook-generator.js`. Ele vai servir para gerarmos um React Hook. Em `hook-generator.js` vamos ter o seguinte código: ```js module.exports = function (plop) { }; ``` É um código igual ao que fizemos antes, mas agora ele está em um arquivo separado. Então vamos conectá-lo ao arquivo principal, o `plopfile.js`; ```js const hookGenerator = require('./plop/hook-generator.js'); module.exports = function (plop) { hookGenerator(plop); }; ``` Dessa forma estamos fazendo com que o `plopfile.js` seja um lugar onde chamamos nossos geradores ao invés de declará-los diretamente aqui. ## Iniciando um gerador de React Hooks Volte ao arquivo `hook-generator.js` para podermos ver como é simples criar um gerador de arquivos. ```js module.exports = function (plop) { plop.setGenerator('hook', { description: 'Gerador de React Hooks', prompts: [], actions: [] }) }; ``` É desse modo que iniciamos um gerador. Vamos entender cada uma das suas partes: - `setGenerator`: Função para criar um gerador. Ela recebe uma string indicando seu nome e um objeto indicando suas configurações - `"hook"`: Indica o nome que demos ao gerador - `description`: Campo para colocarmos uma descrição sobre o nosso gerador - `prompts`: Array que vai receber objetos que vão indicar as perguntas que o terminal vai fazer para nós respondermos, para assim ele saber como criar o arquivo. - `actions`: Outro Array, e ele vai receber objetos que vão indicar as ações que o Plop vai ter que executar baseado em nossas respostas. Partiremos agora para o `prompts`. Para criar um hook, vamos simplesmente pedir para o usuário indicar o nome do hook a ser criado. Assim poderemos usar esse nome para criar o nome do arquivo e já criar um código com esse mesmo nome. Em resumo, vamos usar os `prompts` quando precisarmos ter o valor de alguma variável. Vamos chamar essa variável de `nomeHook`. Ficará assim: ```js ... prompts: [ { type: 'input', name: 'nomeHook', message: 'Digite o nome do Hook: ' } ], ... ``` - `type` indica o tipo de entrada que vamos usar. Para permitir que o usuário escreva, utilizamos o `input` - `name` é o nome da variável - `message` é o texto que o terminal vai imprimir para pedir uma ação do usuário [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## Definindo Ações Para encerrar, precisamos indicar uma ação a ser executada. No nosso caso, um arquivo vai ser criado. Com o intuito de criar um arquivo com o código que quisermos usando as variáveis que pegamos em `prompts`, criamos um arquivo de template que usa `Handlebars`. Crie um arquivo chamado `hook-template.hbs`. Dentro dele teremos o template do nosso código. Você pode escrever do jeito que quiser. ```hbs import { useState, useEffect } from 'react'; export function use{{nomeHook}}(){ const [value, setValue] = useState(null); useEffect(() => { }, []); return value; } ``` Então criamos aqui uma estrutura genérica para um `React Hook`. Esse é o conteúdo que o `Plop.js` vai colocar no arquivo que for gerado. Porém, veja que no nome da função escrevemos `{{nomeHook}}`. O Handlebars vai trocar essa parte pelo nome da nossa variável. Ou seja, se o usuário escrever `Scroll`, teremos uma função com o nome `useScroll()`. Por fim, para fazer esse arquivo ser gerado, vamos escrever nossa `action`. ```js ... actions: [ { type: 'add', path: 'src/hooks/use{{nomeHook}}.js', templateFile: 'plop/hook-template.hbs' } ] ... ``` - Como queremos criar um novo arquivo, o tipo da ação deve ser `add`. - Em `path` indicamos o caminho do arquivo e seu nome. Note que colocamos `{{nomeHook}}` para que seja trocado pela nossa variável. Assim o arquivo será criado com esse nome. - `templateFile` indica o arquivo com a template que será usada para inserir conteúdo no arquivo a ser criado. ## Executando o Plop.js Finalmente, basta executar o comando `npm run plop`. Como só temos um gerador, ele vai iniciá-lo automaticamente. Vamos dar ao nosso hook o nome `Scroll`. ![Plop.js sendo iniciado pelo terminal](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/plopjs-start.png) Assim que você pressionar `Enter`, o arquivo do jeito que queríamos será gerado, como você pode ver na imagem abaixo: ![Plop.js - React Hook gerado automaticamente](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/plopjs-react-hook-generated.png) [ ![Desenvolvedor React Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor React Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react-senior) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Angular ](https://www.treinaweb.com.br/blog/tag/angular) - [ #ReactJS ](https://www.treinaweb.com.br/blog/tag/reactjs) - [ #Vue.js ](https://www.treinaweb.com.br/blog/tag/vue-js) - [ #ferramentas ](https://www.treinaweb.com.br/blog/tag/ferramentas) - [ #react native ](https://www.treinaweb.com.br/blog/tag/react-native) - [ #Plop.js ](https://www.treinaweb.com.br/blog/tag/plop-js) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Micro-Front-End-Microserviços-no-seu-navegador-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ Micro Front-End - Microserviços no seu navegador ](https://www.treinaweb.com.br/blog/micro-front-end-microservicos-no-seu-navegador) Entenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta estratégia para a arquitetura de suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/16065017/front-back-ou-fullstack-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Devo começar como Front-End, Back-End ou Full Stack? ](https://www.treinaweb.com.br/blog/devo-comecar-como-front-end-back-end-ou-full-stack) Devo começar minha carreira como desenvolvedor Front-End, Back-End ou FullStack? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/front_vs_back-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 10 anos atrás ## [ O que é front-end e back-end? ](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end) Os desenvolvedores de front-end e back-end se completam na maioria dos casos. Se faz indispensável saber o papel que cada um desempenha ou pode desempenhar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/WEB-JARS-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ WebJars: Simplifique o gerenciamento de dependências front-end ](https://www.treinaweb.com.br/blog/webjars-simplifique-o-gerenciamento-de-dependencias-front-end) Otimize seu desenvolvimento Java! Descubra como o WebJars simplifica o gerenciamento de dependências front-end. Integre com facilidade e eficiência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/dicas-projetos-frontend-min-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ 5 ideias de projetos para praticar - front-end ](https://www.treinaweb.com.br/blog/5-ideias-de-projetos-para-praticar-front-end) Confira neste artigo algumas dicas de projetos de front-end, para que você possa praticar e melhorar suas habilidades. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 3 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-3) Conheça mais uma lista de extensões do VS Code que ajudarão a melhorar a sua produtividade e facilitar o seu trabalho. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 2 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-2) Veja mais uma lista com as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1) Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **05h 56min 42s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58