Olá! Eu tenho escrito um pouco de Javascript esta semana e, como sempre, quando começo um novo projeto de front-end, me deparo com a pergunta: devo usar um sistema de compilação?
Quero falar sobre o que me atrai nos sistemas de compilação, por que (geralmente) ainda não os uso e por que acho frustrante que algumas bibliotecas Javascript de front-end exijam o uso de um sistema de compilação.
Estou escrevendo isso porque a maior parte da escrita que vejo sobre JS assume que você está usando um sistema de compilação e pode ser difícil de navegar para pessoas como eu, que escrevem pequenos projetos Javascript muito simples que não requerem um sistema de compilação .
o que é um sistema de compilação?
A ideia é que você tenha um monte de código Javascript ou Typescript e queira traduzi-lo em um código Javascript diferente antes de colocá-lo em seu site.
Os sistemas de compilação podem fazer muitas coisas úteis, como:
- combinando centenas de arquivos JS em um grande pacote (por razões de eficiência)
- traduzindo Typescript para Javascript
- verificação de digitação Datilografado
- minificação
- adicionando polyfills para suportar navegadores mais antigos
- compilando JSX
- treeshaking (remova o código JS não utilizado para reduzir o tamanho dos arquivos)
- construindo CSS (como o tailwind faz)
- e provavelmente muitas outras coisas importantes
Por causa disso, se você está construindo um projeto de front-end complexo hoje, provavelmente está usando um sistema de construção como webpack, rollup, esbuild, parcela ou vite.
Muitos desses recursos são atraentes para mim e usei sistemas de compilação no passado por alguns destes motivos: Mess With DNS usa esbuildpara traduzir Typescript e combinar muitos arquivos em um arquivo grande, por exemplo.
o objetivo: fazer alterações facilmente em pequenos sites antigos
Eu faço muitos sites pequenos e simples, tenho aproximadamente 0 energia de manutenção para qualquer um deles e os altero com pouca frequência .
Meu objetivo é que, se eu tiver um site que fiz há 3 ou 5 anos, gostaria de poder, em 20 minutos:
- obtenha a fonte do github em um novo computador
- fazer algumas mudanças
- coloque na internet
Mas minha experiência com sistemas de construção (não apenas sistemas de construção Javascript!), É que se você tem um site de 5 anos, muitas vezes é uma dor enorme ter o site construído novamente.
E como a maioria dos meus sites são bem pequenos, a vantagem de usar um sistema de construção é bem pequena – eu realmente não preciso de Typescript ou JSX. Posso ter apenas um script.jsarquivo de 400 linhas e encerrar o dia.
exemplo: tentando construir o playground do SQL
Um dos meus sites (o sql playground ) usa um sistema de compilação (está usando Vue). Editei esse projeto pela última vez há 2 anos, em uma máquina diferente.
Vamos ver se ainda posso construí-lo facilmente hoje em minha máquina. Para começar, temos que correr npm install. Aqui está a saída que recebo.
$ npm install
[lots of output redacted]
npm ERR! code 1
npm ERR! path /Users/bork/work/sql-playground.wizardzines.com/node_modules/grpc
npm ERR! command failed
npm ERR! command sh /var/folders/3z/g3qrs9s96mg6r4dmzryjn3mm0000gn/T/install-b52c96ad.sh
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_args.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack_builder.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_trace.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channelz.o
Há algum tipo de construção de erro grpc. Sem problemas. Eu realmente não preciso dessa dependência de qualquer maneira, então posso levar apenas 5 minutos para removê-la e reconstruí-la. Agora eu posso npm installe tudo funciona.
Agora vamos tentar construir o projeto:
$ npm run build
? Building for production...Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:414:16)
at handleParseError (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:467:10)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:499:5
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:356:12
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
Esta resposta de estouro de pilha sugere a execução export NODE_OPTIONS=--openssl-legacy-providerpara corrigir esse erro.
Isso funciona e, finalmente, posso npm run buildconstruir o projeto.
Isso não é tão ruim (só tive que remover uma dependência e passar uma opção de nó um pouco misteriosa!), Mas prefiro não ser prejudicado por esses erros de construção.
para mim, um sistema de compilação não vale a pena para pequenos projetos
Para mim, um sistema de compilação Javascript complicado simplesmente não parece valer a pena para pequenos projetos de 500 linhas – significa abrir mão de poder atualizar facilmente o projeto no futuro em troca de alguns benefícios bastante marginais.
esbuild parece um pouco mais estável
Quero dar uma rápida menção ao esbuild: aprendi sobre o esbuild em 2021 e usei para um projeto, e até agora parece uma maneira mais confiável de criar projetos JS.
Acabei de tentar criar um esbuildprojeto que toquei pela última vez há 8 meses em um novo computador e funcionou. Mas não posso dizer com certeza se conseguirei construir facilmente esse projeto em 2 anos. Talvez sim, espero que sim!
não usar um sistema de compilação geralmente é muito fácil
Aqui está a aparência da parte do código nginx playground que importa todas as bibliotecas:
<script src="js/vue.global.prod.js"></script>
<script src="codemirror-5.63.0/lib/codemirror.js"></script>
<script src="codemirror-5.63.0/mode/nginx/nginx.js"></script>
<script src="codemirror-5.63.0/mode/shell/shell.js"></script>
<script src="codemirror-5.63.0/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="codemirror-5.63.0/lib/codemirror.css">
<script src="script.js "></script>
Este projeto também está usando o Vue, mas apenas usa um <script srcpara carregar o Vue – não há processo de construção para o frontend.
um modelo sem sistema de compilação para usar o Vue
Algumas pessoas perguntaram como começar a escrever Javascript sem um sistema de compilação. Claro que você pode escrever vanilla JS se quiser, mas meu framework usual é o Vue 3.
Aqui está um pequeno modelo que construí para iniciar um projeto Vue 3 sem nenhum sistema de compilação. São apenas 2 arquivos e ~30 linhas de HTML/JS.
algumas bibliotecas exigem que você use um sistema de compilação
Este sistema de construção está em minha mente recentemente porque estou usando CodeMirror 5 para um novo projeto esta semana, e vi que havia uma nova versão, CodeMirror 6.
Então pensei – legal, talvez eu devesse usar o CodeMirror 6 em vez do CodeMirror 5. Mas – parece que você não pode usar o CodeMirror 6 sem um sistema de compilação (de acordo com o guia de migração ). Então, vou ficar com o CodeMirror 5.
Da mesma forma, você costumava baixar o Tailwind como um arquivo CSS gigante, mas o Tailwind 3 não parece mais estar disponível como um arquivo CSS grande, você precisa executar o Javascript para criá-lo. Vou continuar usando o Tailwind 2 por enquanto. (Eu sei, eu sei, você não deveria usar o grande arquivo CSS, mas ele tem apenas 300 KB gzipado e eu realmente não quero uma etapa de compilação)
(editar: parece que o Tailwind lançou uma CLI autônoma em 2021, o que parece uma boa opção)
Não sei ao certo por que algumas bibliotecas não fornecem uma versão sem sistema de compilação – talvez distribuir uma versão sem sistema de compilação adicionaria muita complexidade adicional à biblioteca e o mantenedor não acha que vale a pena isto. Ou talvez o design da biblioteca signifique que não é possível distribuir uma versão sem sistema de compilação por algum motivo.