Lições aprendidas de um ano de luta com Webpack e Babel

Omar Bahareth Blocked Unblock Seguir Seguindo 25 de dezembro de 2018

Estou usando o React há mais de um ano e, na maior parte do tempo, as coisas quebraram, diminuíram nossa velocidade de construção e não funcionaram nos navegadores que eu estava inventando. Decidi compartilhar as lições que aprendi na esperança de que possam ajudar outras pessoas.

Tenha muito cuidado com a importação de grandes bibliotecas

Tentar compilar grandes bibliotecas (como as bibliotecas do tipo react-plot ou PDF) pode levar sua compilação do Webpack de segundos a 10 minutos +. Se um pacote está atrasando sua compilação, considere usar uma versão CDN. Nós simplesmente usamos tags de script, mas existem plug-ins de Webpack que podem ajudar com isso também:

Tente encontrar um plugin webpack para suas dependências

Apenas importar pacotes como moment.js ou lodash traz muito inchaço que você provavelmente não precisa. Tente importar apenas o que você precisa ou, melhor ainda, encontre um plug-in de webpack que remova as coisas não usadas do seu pacote, porque as importações seletivas nem sempre funcionam . Como um exemplo, há um plug-in de webpack que remove muito o inchaço desnecessário adicionado por Moment.js.

O Google na verdade tem um repositório legal listando algumas dependências problemáticas comuns.

Inspecione seu pacote com o analisador de pacote Webpack

arquivos moment.js dentro de um pacote

O Webpack Bundle Analyzer é extremamente útil para ver exatamente o que está acontecendo no seu pacote. Na imagem acima, você notará que o moment.js tem muitos arquivos de localização que seu aplicativo provavelmente não precisa. O Webpack Bundle Analyzer pode ajudá-lo a identificar facilmente esses problemas.

Adicione es-check ao seu pipeline de CI no início

es-check irá ajudá-lo a descobrir qual versão ES seu pacote está usando, é super útil descobrir se você de alguma forma não está mais produzindo ES5. Mesmo se você estiver usando o Babel e a lista de navegadores, você pode estar importando um módulo de nó que não é destinado a ser usado em navegadores, ou mesmo um pacote que não está sendo distribuído como ES5. Adicione o es-check ao seu pipeline de integração contínua desde o início e ele deverá ajudá-lo a descobrir se o seu pacote já parou de funcionar com o ES5, e isso ajudará a descobrir qual pacote é o culpado para que você possa transpilá-lo.

Transpilando um node_module

Nós tínhamos importado um pacote muito simples chamado hex-rgb que não era nem mesmo para navegadores e este pequeno pacote não fazia mais com que nosso pacote fosse compatível com o ES5. Esses pacotes devem passar por Babel e ser transferidos.

Em sua configuração do webpack, o campo de exclusão do seu carregador do babel provavelmente se parece com isto: /node_modules/ . Precisamos fazer um regex que exclua node_modules exceto os específicos que devem ser transpilados:

 // Exclui todos os módulos de nó, exceto hex-rgb e outro-pacote 
/ node_modules / (?! [hex -rgb | outro -pacote]) /

E mais uma vez, isso pode não ser uma boa solução para pacotes grandes, pois pode reduzir drasticamente o tempo de compilação e você pode querer mudar para uma versão CDN.

Siga este problema no repositório do babel-loader para se manter atualizado sobre como lidar com casos como este.

Use a lista de navegadores para especificar seus navegadores de destino

A lista de navegadores permite que você especifique quais navegadores devem ser transferidos.

 > 1% 
ie> = 8

Essa configuração simples é direcionada a navegadores com uso de mais de 1% de uso global e versões do IE 8 e superiores.

Use babel.config.js sobre .babelrc (para Babel ? 7.0)

Favor usar o babel.config.js para configurar o Babel sobre .babelrc . Se você deseja transpilar node_modules (que agora está se tornando um caso muito comum com webapps), então você deve usar o babel.config.js .

.babelrc pode ser substituído por outro .babelrc pertencente a um node_module que você está transpilando e que pode levar a todos os tipos de problemas estranhos.

Torne sua saída de criação de log do webpack-dev-server mais amigável

  1. Altere sua configuração do webpack-dev-server para esta
 devServer: { 
noInfo: true
stats: 'minimal'
}

2. Adicione o WebpackBar para obter resultados muito menos detalhados, mais amigáveis e mais concisos.

Nota: A primeira configuração destina-se a ser combinada com o Webpack Bundle Analyzer, pois suprime a saída do console para itens relacionados ao seu pacote que o Webpack Bundle Analyzer já mostra. Se você não estiver usando o Webpack Bundle Analyzer, não aplique o primeiro passo.

Texto original em inglês.