[Produtividade] Automatizando a criação de arquivos no seu projeto node com npm

Imagine que no seu projeto, você sempre precisa criar a mesma sequência de arquivos por algum motivo, seja para criar um novo componente no seu front em React ou um Controller no seu back Express.

Nesse post, vou descrever como usar npm-scripts para facilitar esse processo.

Usaremos de exemplo um projeto em React.

Resumindo o funcionamento

A funcionalidade base que torna essa abordagem simples de usar é a possibilidade de ler parâmetros ao executar scripts definidos no package.json. Com essa parte sendo feita automaticamente pelo npm, basta usar mais alguns comandos para criação de pastas e arquivos necessários.

Para ler o valor de um parâmetro passado via linha de comando usamos $npm_config_<var_name>:

script definido no package.json:

"foo": "echo \"$npm_config_test\""

executando:

npm run foo --test=bar

bar

Exemplo Aplicado

A estrutura padrão de um componente é particular de cada projeto/equipe, a escolha aqui é apenas para ter algo um pouco mais complexo do que um único arquivo, assim ficará mais clara a vantagem em usar scripts. Considere a seguinte estrutura de pasta para um componente:

Criando os templates

Crie uma pasta npm-templates na raiz do seu projeto, onde ficarão os templates dos arquivos necessários para criação de um componente, essa pasta será acessada pelo npm-script ao executar.

Dentro de npm-templates, crie um arquivo chamado component.jsx com o seguinte conteúdo:

import React from 'react';
import Layout from './Layout';

const PLACEHOLDER = () => {
    return <Layout />;
};

export default PLACEHOLDER;

Crie mais um arquivo chamado layout.jsx com o seguinte conteúdo:

import React from 'react';
import '../Style/index.css';

const Layout = () => {
    return (
        <div>PLACEHOLDER</div>
    );
};

export default Layout;

Perceba o texto PLACEHOLDER, que será substituído ao executar o comando

Após criar os arquivos, adicione o seguinte script no seu package.json:

    "create:component": "mkdir -p ./src/components/$npm_config_name/Layout ./src/components/$npm_config_name/Style && sed s/PLACEHOLDER/$npm_config_name/g ./npm-templates/layout.jsx > ./src/components/$npm_config_name/Layout/index.jsx && sed s/PLACEHOLDER/$npm_config_name/g ./npm-templates/component.jsx > ./src/components/$npm_config_name/index.jsx && touch ./src/components/$npm_config_name/Style/index.css"

Em bash && é usado para rodar um comando após o outro

Como são muitas coisas acontecendo, vamos quebrar linha a linha para facilitar a visualização:

Começamos criando a pasta do componente e as duas pastas internas, note que estamos usando uma variável npm_config_name como nome da pasta, que será passada como argumento ao chamar o comando.

mkdir -p ./src/components/$npm_config_name/Layout ./src/components/$npm_config_name/Style

Em seguida, usamos o comando sed com o pattern de substituíção e o arquivo template, redirecionando a saída com > para um arquivo novo. O processo é feito para os dois templates que foram criados.

A mesma variável é usada aqui para substituir o placeholder.

sed s/PLACEHOLDER/$npm_config_name/g ./npm-templates/layout.jsx > ./src/components/$npm_config_name/Layout/index.jsx
sed s/PLACEHOLDER/$npm_config_name/g ./npm-templates/component.jsx > ./src/components/$npm_config_name/index.jsx

Por fim, apenas criamos um arquivo vazio de estilos que não precisa de nenhum template, mas que também pode ser criado se necessário.

touch ./src/components/$npm_config_name/Style/index.css

Executando o comando:

npm run create:component --name=Modal

Lembre de passar o parâmetro --name com o nome do seu componente

Teremos o seguinte resultado:

Todas as substituições foram feitas e o componente já pode ser importado onde for necessário.

Essa mesma técnica pode ser usada para criar hooks, actions, reducers, etc.

A principal vantagem de um script como esse é a padronização, isso garante que todo componente será criado seguindo o que está definido no template, isso é ótimo para projetos com vários devs trabalhando, a agilidade também é um ponto positivo a se destacar.

OBS: Como um usuário de Linux, não tenho certeza da disponibilidade do comando sed para sistema Windows, eu recomendaria testar usando Git Bash.

OBS2: Se quiser visualizar o funcionamento com mais detalhes o repositório desse exemplo pode ser acessado aqui