Snowpack tem promovido uma abordagem de desenvolvimento web desagregada que elimina a necessidade de empacotadores JavaScript tradicionais como Webpack e Parcela . Hoje, quase todos os principais navegadores têm suporte para ESM, ao contrário do passado, quando dependíamos muito de bundlers como o Webpack. Embora as coisas hoje tenham mudado até certo ponto, uma grande parte da comunidade de desenvolvedores não mudou dos empacotadores simples e antigos de JavaScript.
A maneira de fazer as coisas do Snowpack tem sido bastante produtiva e extremamente rápida. O Snowpack apenas reconstrói os arquivos onde as alterações ocorreram, ao contrário dos construtores tradicionais onde partes inteiras de um aplicativo são reconstruídas e agrupadas novamente. O tempo de agrupamento para projetos de front-end maiores com milhares de componentes costumava levar até 30 segundos, mas com o Snowpack, este tempo foi reduzido para menos de 50 ms. Em janeiro deste ano, Snowpack versão 3 lançado, o que leva as coisas para o próximo nível.
Os recursos experimentais da versão anterior agora são oficiais e prontos para serem usados na produção. Neste blog, você verá os novos recursos em ação. Então, vamos começar!
Primeiros passos
Primeiro, teremos que configurar um projeto em um novo diretório. Abra sua ferramenta de linha de comando favorita para criar um novo diretório e digite os seguintes comandos npm para instalar o novo Snowpack v3:
$ npm init $ npm install--save-dev snowpack@^3.0.0
npm init criará nosso arquivo package.json onde adicionaremos scripts para executar o Snowpack. Abra seu arquivo package.json e insira os seguintes scripts nele:
"scripts": { "start":"snowpack dev", "init":"snowpack init"
}
Com o snowpack init , obteremos nosso arquivo snowpack.config criado. Como o Snowpack requer um index.html como ponto de entrada, criamos o arquivo index.html no mesmo diretório e, em seguida, executamos o comando abaixo:
$ npm run start
Saída
Você deve ver esta tela no seu navegador:
Depois de instalar e executar o novo Snowpack v3, vamos nos aprofundar nas novas mudanças que ele traz.
Importações de streaming
Esta é uma das maiores e mais importantes mudanças desta versão. O streaming de importações está aqui para revolucionar as práticas de desenvolvimento de front-end. Esse recurso aproveita o poder do JavaScript moderno com os módulos ES. Por padrão, o Snowpack puxa os pacotes npm instalados localmente e os armazena em cache, portanto, não precisaremos mais de um bundler.
Mas nesta versão as coisas ficaram futurísticas, não haverá necessidade de instalar os pacotes npm para o desenvolvimento do frontend! Agora, você só precisa importar qualquer pacote do modo ESM padrão e o Snowpack fará o resto.
Como isso funciona?
Anteriormente, você tinha que importar o pacote do URL do CDN . Mas agora, quando você importa um pacote JavaScript específico, o Snowpack busca o pacote pronto para executar de seu CDN de pacote ESM em segundo plano. O pacote é armazenado em cache localmente, o que permite o suporte para desenvolvimento offline. O exemplo a seguir tornará as coisas muito mais claras.
Sem Snowpack e npm
Suponha que você precise usar o React em seu projeto sem npm, você provavelmente escreve algo assim:
import * as React from'https://cdn.skypack.dev/[email protected]';
Essa abordagem não é ideal, mas o Snowpack resolve esse problema.
Com Snowpack e sem npm
Basta usar a importação ESM padrão para React e Snowpack, que irá buscar o pacote e armazená-lo em cache para uso offline:
import React from react;
A declaração acima será semelhante a esta:
import"https://pkg.snowpack.dev/react"
Para usar este recurso, primeiro temos que ativá-lo fazendo algumas alterações em nosso arquivo snowpack.config :
packageOptions: { fonte:"remoto",
},
Definir packageOptions.source como remoto habilitará as importações de streaming para nosso projeto. Agora vamos tentar importar o React sem npm. Crie um novo arquivo index.js e importe React assim:
import React from"react";
Conforme o Snowpack procura os arquivos referenciados em index.html , adicionamos a seguinte linha de código em nosso index.html :
Agora reconstrua o projeto Snowpack e verifique a saída no console. Se tudo correr bem, você obterá o seguinte resultado:
Abaixo está a captura de tela do código-fonte do nosso navegador e a estrutura do arquivo do projeto, onde podemos ver o React no navegador e no cache local:
Melhores otimizações com ESbuild
ESbuild é o empacotador padrão do Snowpack para arquivos JavaScript, TypeScript e JSX, mas nesta versão, a equipe deu um passo à frente. Com esta nova atualização, o tempo gasto para empacotar, reduzir e transpilar o site para produção é mais rápido devido ao novo pipeline de produção de construção integrado. ESbuild é escrito em Golang, o que o torna extremamente rápido em comparação com os empacotadores escritos em JavaScript. Mas sendo um recurso mais recente, é melhor usá-lo em projetos menores e não críticos. Para habilitá-lo, digite as seguintes linhas em snowpack.config.js :
otimizar: { pacote: verdadeiro, minify: true, alvo:"es2018",
},
Uma nova API
Antes da versão v3 do Snowpack, a interação com o servidor de desenvolvimento e o pipeline de construção era possível por meio da linha de comando com diferentes comandos e sinalizadores. Mas agora, a equipe por trás do Snowpack deu a você uma API que pode ser usada para um controle mais avançado sobre o pipeline de construção e o servidor de desenvolvimento do Snowpack. Com esta API, as possibilidades são infinitas e já resultou na produção de uma solução fantástica de renderização do lado do servidor chamada SvelteKit . Vamos criar um servidor Snowpack simples a partir da nova API JavaScript.
Primeiro de tudo, temos que criar um novo arquivo chamado server.js onde nosso servidor ficará. Toda a lógica do seu servidor deve estar dentro de server.js . Depois que o arquivo é criado, começamos a importar funções diferentes de nossa API Snowpack. Os detalhes completos sobre a API estão no site principal :
const {startServer, createConfiguration}=require ("snowpack");
A função startServer pega um objeto de configuração semelhante ao arquivo snowpack.config.js que criamos antes. A função createConfiguration é criar o objeto necessário para o servidor. Se você precisar carregar um arquivo snowpack.config.js , a API tem uma função loadConfiguration separada também, que funciona de maneira semelhante:
const con={ packageOptions: { fonte:"remoto", polyfillNode: true, }, buildOptions: { htmlFragments: true, },
};
const config=createConfiguration (con);
servidor const=assíncrono ()=> { esperar startServer ({config});
};
servidor();
Altere os scripts no package.json desta forma:
"scripts": { "start":"node server.js" },
Agora execute o seguinte comando:
npm run start
Se tudo correr bem, você terá o servidor Snowpack funcionando. Certifique-se de ter o arquivo index.html , pois o servidor irá procurá-lo no mesmo diretório.
Um novo tempo de execução Node.js
Este recurso foi possível devido à colaboração do Snowpack e da equipe Svelte. Um novo tempo de execução do lado do servidor na versão v3 capacita o SvelteKit, que permite aos desenvolvedores importar qualquer arquivo construído com Snowpack diretamente para o Node.js. Com esse recurso, as equipes tiveram sucesso em criar um fluxo de construção unificado no front-end e no back-end. Devido a este esquema de trabalho, a verdadeira renderização do lado do servidor foi desbloqueada, a qual está sendo usada atualmente no SvelteKit. O runtime também faz as integrações de teste para testar frameworks como Jest, Mocha, etc. A renderização do lado do servidor com Snowpack é um pouco complexa e é por isso que é recomendado usar bibliotecas como SvelteKit.
Conclusão
Com projetos como o Snowpack, podemos ver para onde o futuro do desenvolvimento da web está indo. A abordagem seguida pelo Snowpack é moderna e abordagens semelhantes também estão sendo vistas em outros projetos, por exemplo, Deno . A luta atual é para sair do buraco do inferno dos pacotes npm e o Snowpack fez um ótimo trabalho para os desenvolvedores de front-end. Com o tempo, as coisas certamente irão melhorar com os novos recursos. Até então, certifique-se de aproveitar ao máximo este novo lançamento da equipe do Snowpack.
A postagem Novidades no Snowpack v3 apareceu primeiro em LogRocket Blog .
