Lançamento do webpack CLI 🎉🎉🎉

Grandes novidades para gerar configurações automaticamente

Image for post
Image for post
Melhorando cada vez mais a experiência do usuário no webpack

Depois de coletar feedback da comunidade de como era difícil começar com webpack, nós escutamos e decidimos re-imaginar a CLI do webpack. Apesar de mantermos boa parte da lógica da antiga CLI, várias novidades foram adicionadas, algumas delas: init e migrate.

"Quando Andy foi descansar na sombra, um sorriso estranho apareceu em seu rosto, ele conseguiu fazer o webpack funcionar"

Reduzindo confusão ao criar projetos

Como parte da nova CLI, nós estamos trazendo novidades focadas em melhorar a experiência do usuário. Enquanto webpack é uma excelente ferramenta para empacotar módulos, também é uma ferramenta difícil para iniciantes. Quais configurações padrões fazem mais sentido? Para resolver isso, nós estamos introduzindo um sistema de scaffolding. Ele é extenso e visa remover a complexidade inicial do webpack.

Especialmente para iniciantes, tentar extrair o máximo do webpack, muitas vezes pode ser frustrante. Para resolver esse problema, nós decidimos criar esse extensivo sistema de scaffold, trazendo várias possibilidades e reduzindo a carga do usuário.

O objetivo central desse sistema de scaffold é flexibilidade. Um autor de um sistema de scaffold (chamado de addon), será responsável em disponibilizar um arquivo webpack.config.js

Para aprender mais sobre como criar um addon, nós temos um pequeno demo, que mostra como você pode criar um scaffold do zero. Vou deixar aqui alguns comandos para você testar esse sistema:

webpack-cli init
webpack-cli init webpack-addons-demo

Esse sistema disponibiliza a oportunidade de você, como autor, adicionar opções como entry, output, e outras propriedades que são suportadas pelo webpack. Você pode disponibilizar um nome próprio para essa configuração, decidindo quais dependências incluir e dividir sua lógica de configuração usando webpack-merge.

Você pode aprender mais sobre addons na nossa documentação!

Facilidade de migração da v1 para v2

Outra novidade, é a opção migrate. Como webpack v2 chegou com algumas mudanças que podem ser difíceis de mudar para alguns, nós decidimos tirar esse peso das costas do usuário. A novidade de migração é um ótimo modo de atualizar sua configuração de v1 para v2, e ajuda você a ficar atualizado com o webpack v2.

Antes

Depois

E ela já está disponível, basta usar:

webpack-cli migrate webpack.config.js

Desenvolvendo a nova CLI e o futuro

Nós começamos a discutir a situação atual da CLI no começo de Dezembro do ano passado. O time de CLI (sim, temos um time), gastou um bom tempo planejando como esse sistema de scaffold iria funcionar, discussões sobre características da CLI e alguns experimentos com protótipos iniciais.

Em Janeiro, o time trabalhou no migrate e em uma das primeiras versões do init, que era parecido com um yeoman generator. Para evitar problemas de lentidão na execução do init, foi proposto o uso do yeoman como conceito principal. E no final, acabou sendo ótimo!

Em uma versão futura da CLI, nó estamos querendo criar um modo de usar yeoman generators em conjunto com nossa CLI, assim, nossos usuários podem combinar o sistema de scaffold do webpack com outros, assim como Babel.

Nosso time também decidiu que seria bom fazer uso de AST’s para ambos, migrate e init, usando jscodeshift. Além disso, nós estamos usando prettier, yeoman e jest.

Nosso roteiro de trabalho

Depois de todo o feedback da comunidade (e sim, nós amamos cada contribuição!), nós começamos, lentamente, a melhorar a atual CLI e, futuramente, substitui-la com essa versão melhorada.

A CLI começará a ser integrada no webpack daqui a algum tempo, o que significa que você poderá usar webpack init ao invés de webpack-cli init. Nós também estamos extendendo esse sistema de scaffold, permitindo que usuários adicionem propriedades no webpack.config.js em tempo de execução, enquanto também, corrigimos alguns bugs no migrate e init.

Image for post
Image for post
Nós sempre estamos procurando novos contribuidores. Se você quiser se envolver, entre em contato com a gente!

Desenvolver uma nova CLI tem sido desafiador e consumiu um bom tempo. Eu quero aproveitar essa oportunidade e agradecer Addy Osmani, Andrey Okonetchnikov, Pavithra Kodmad, Sean T. Larkin, Tobias Koppers, Juho Vepsäläinen e todo o resto do time principal pelo trabalho duro, orientação e contribuições.

Um agradecimento especial para o time do yeoman, os autores do jest, prettier e jscodeshift por criaram essas ferramentas incríveis.

npm install -g webpack-cli

Estamos ansiosos para ver o que você irá criar com nossa nova CLI 🎉

Créditos

Written by

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