Yarn Plug'n'Play, TypeScript e webpack

Eliminando node_modules de maneira eficaz e com tipagem!

Sem `node_modules`, com tipagem e empacotando tudo! 🎉

Plug'n'Play é uma nova iniciativa da equipe do Yarn que remove a necessidade de ter uma pasta node_modules por projeto e, ao invés disso, utiliza a pasta de cache criada pelo yarn na sua máquina.

Por exemplo, no macOS você pode encontrar essa pasta em:

Algumas das vantagens desse tipo de instalação é:

  • Instalações até 70% mais rápidas (com yarn install ou yarn add)
  • Melhor eficiência para infraestruturas de larga escala e CI (com a pasta de cache podendo ser compartilhada ou até mesmo evitando yarn install em processos de CI)
  • Yarn poderá dizer exatamente quando você esqueceu de listar pacotes nas suas dependências (o algorítmo de resolução de módulos do Node.js não sabe quais pacotes seu projeto usa, ou dependências de dependências, ele simplesmente procura na sua máquina algo que corresponda ao módulo pedido)

Se você quiser saber mais detalhes da implementação, existem 3 documentos que posso recomendar:

A última versão estável do yarn@1.12.1 , já inclui essa funcionalidade por padrão, a questão agora é, como utilizá-la?

Iniciando com Plug'n'Play

Para ilustrar a funcionalidade, vamos criar um projeto de exemplo:

E atualizar o package.json para:

E… é isso aí! 😅🤯🎉

A partir de agora, todos os pacotes que você adicionar nesse projeto, Yarn irá usar seu próprio algorítimo de resolução de depêndencias e irá utilizar os pacotes já instalados na pasta cache da sua máquina. Deixando suas instalações mais rápidas e ainda podendo reutilizar o que já foi instalado por outros projetos.

Porém, parando para pensar um pouco, temos um problema aqui. Se estamos mudando o local de resolução das nossas depêndencias (não é mais node_modules), como fica a integração com ferramentas do nosso ecossistema?

Resolvendo Plug'n'Play em webpack e TypeScript

Apesar da mudança, a equipe do Yarn já se preparou para introduzir o mínimo de problemas possível. O idealizador da funcionalidade Plug'n'Play, Maël Nison, já disponibilizou ferramentas de integração para o Rollup, Jest e webpack.

Sabendo disso, podemos começar a aplicar nossa configuração do webpack e também do TypeScript:

Listando os arquivos nessa paste, teremos:

O arquivo .pnp.js é o algorítimo de resolução (module resolver) criado pelo Yarn (ou seja, a implementação do Plug'n'Play) junto com a tabela de resolução estática (static resolution tables) que lista 3 coisas:

  • Quais pacotes estão disponíveis na árvore de depêndencia
  • Como eles estão ligados entre si
  • Aonde eles estão salvos em disco

A pasta .pnp/ é gerada para pacotes que usam link simbólico (symlink) ou debug. Para saber mais detalhes sobre essa paste, recomendo dar uma olhada no PDF da tese.

Vamos criar nosso webpack.config.js :

E adicionar:

Aqui temos uma configuração bem familiar do webpack onde:

  • [A]: Estamos passando para o ts-loader algumas opções de resolução que estão vindo direto do pnp-webpack-plugin. Com isso, nosso compilador TS irá conseguir resolver importação de pacotes utilizando Plug'n'Play
  • [B]: Estamos dizendo ao webpack para utilizar o plugin do Plug'n'Play ao resolver módulos/pacotes importados dentro dos nossos pontos de entrada
  • [C]: resolverLoader é similar ao resolver , mas ao invés de módulos, ele diz ao webpack aonde buscar por loaders, quando os mesmos forem utilizados em código, por exemplo import Txt from 'raw-loader!foo.txt'

Agora, como listado em nossa chave entry, vamos criar nosso arquivo src/entry.tsx :

E adicionar:

Vamos adicionar nossas depêndencias e tipos:

Como estamos utilizando TypeScript, precisamos do nosso tsconfig.json :

E atualizá-lo para:

E ao executar o webpack:

Teremos:

Hip Hip… Hooray!!1 🎉🎉

Finalizando

Acabamos de integrar 3 ferramentas essenciais no nosso dia a dia:

  • Yarn com Plug'n'Play ativado, reduzindo o consumo de espaço na sua máquina e deixando seu projeto mais rápido
  • TypeScript para escrevermos JavaScript com tipagem estática
  • webpack como empacotador da nossa aplicação

A integração do Plug'n'Play com o restante das ferramentas de desenvolvimento ainda está avançando (principalmente editores de código como VSCode, Atom, etc), porém, já é possível utilizá-lo hoje em dia e aumentar a precisão e velocidade de instalação do seu fluxo de trabalho.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store