19 de agosto, 2023 - 7 min de leitura

Tags: nullstack, open-source

Nullstack + Babel: Renovando o antigo compilador

• Índice
  • Como usar
  • O que isso faz em detalhes
  • Como desativar toda a mágica
  • Como usar plugins/presets
  • Propósito
  • Projetos de exemplo

Babel esteve presente desde os primórdios da web moderna traduzindo sintaxes diversas do JavaScript, como de versões novas (ex: ES2020), para aquela padronizada e suportada pelo maior número de navegadores (ex: ES5). E até hoje isso tem espaço respeitado nas propostas da própria linguagem do JS (ex: do expressions).

Sendo tão salvador, pode-se imaginar que existiram fortes razões para propor a implementação do novo compilador SWC no Nullstack. E sim, como eu mesmo fui o principal idealizador disso, posso afirmar: De performance e leveza à simplicidade de algo baseado em Rust, projetos como SWC representam uma grande mudança em como se desenvolve a web.

"Então se o SWC muda a web e virou o compilador padrão, por que voltar? Se decida!" Ok! Leia mais sobre as razões do nullstack-adapt-babel existir na seção Propósito.

✨ A documentação a seguir é uma tradução do README do projeto

O nullstack-adapt-babel substitue totalmente o compilador do Nullstack (atualmente SWC + swc-plugin-nullstack) pelo Babel e seu dourado/antigo sistema de plugins/presets.

Como usar

Este script pode ser usado de duas maneiras:

• No modo "automático" você só precisa usar com npx antes de seus scripts Nullstack, como:

"scripts": {
  "start": "npx nullstack-adapt-babel && nullstack start",
  "build": "npx nullstack-adapt-babel && nullstack build"
}

Isso imediatamente faz essas coisas que podem ser totalmente desativadas dessas maneiras

• No modo "manual" você o usa como uma função que altera a Configuração do Webpack:

// webpack.config.js
const useBabel = require('nullstack-adapt-babel')
const configs = require('nullstack/webpack.config')

module.exports = useBabel(configs)

No modo manual você pode configurar o Babel com plugins/presets

O que isso faz em detalhes

Quando usado no modo automático com npx:

Procura o nullstack/webpack.config.js original e substitui o seu module.exports da seguinte forma:

- module.exports = [server, client]
+ module.exports = require('/full/path/to/nullstack-adapt-babel')([server, client])

Fazendo este pacote ser chamado diretamente a cada execução do Nullstack, atualizando a configuração do Webpack em sua fonte, então tudo é feito exatamente como no modo manual.

Quando usado no modo manual com webpack.config.js customizado:

Procura o carregador (loader do Webpack) do compilador original e faz com que ele nunca seja executado:

- function swc(options, other) {
+ function swc(options, other) {return {};

Isso é obrigatório para um ambiente como StackBlitz que não suporta nem a menção do SWC

• Verifica se deve ficar desabilitado retornando a configuração original se verdadeiro

• Substitui a chave optimization original para usar esbuild em produção (veja sua configuração aqui)

• Recria o array module.rules mantendo os carregadores necessários e adicionando os relacionados ao Babel

💡 Quer mergulhar no código? Tudo começa aqui

Como desativar toda a mágica

A cada execução isso procura por uma chave NULLSTACK_DEFAULT_CONFIG em seu .env, como:

NULLSTACK_DEFAULT_CONFIG=true

Usando se existir, caso contrário, procura pelo mesmo em uma chave nullstack-adapt-babel em seu package.json:

"nullstack-adapt-babel": {
  "NULLSTACK_DEFAULT_CONFIG": true
}

Usar esse valor desfará tudo e deixará que o Nullstack funcione com seu compilador padrão.

Como usar plugins/presets

Opções customizadas podem ser passadas no 2º argumento da função, permitindo configurar seus próprios plugins/presets:

// webpack.config.js
const useBabel = require('nullstack-adapt-babel')
const configs = require('nullstack/webpack.config')

module.exports = useBabel(configs, {
  babel: {
    plugins: [
      ['babel-plugin-transform-remove-console', { exclude: ['info'] }],
      '@babel/plugin-proposal-throw-expressions'
    ],
    presets: [['@babel/preset-flow', { allowDeclareFields: true }]]
  }
})

Atualmente, os plugins/presets customizados são apenas anexados ao original

Atualmente, o nosso @babel/parser apenas suporta os plugins doExpressions e throwExpressions, como escrito aqui, contribua com esse arquivo se desejar adicionar mais opções!

Propósito

Alguém pode perguntar _"Nullstack tendo um compilador SWC rápido, por que alguém voltaria ao futuro passado?", e compreensível, tipo, eu mesmo estou me perguntando isso agora finalmente documentando tudo isso 😅

Não apenas rápido, a beleza daquilo até me seduziu a aprender um pouco de Rust e contribuir com nosso próprio plugin do SWC ⚡

Então, sim, há algum raciocínio em trazer de volta os dias de Babel, além de dar a liberdade dos plugins/presets para o usuário e gostar de experimentos, queríamos usar uma plataforma como StackBlitz que atualmente não suporta os binários do SWC.

Então este pacote possibilita projetos como estes:

Projetos de exemplo

• Nullstack New: Execute um template Nullstack com um link ✨🚀
• Nullstack Examples: Alguns exemplos no framework Nullstack facilmente visualizados no StackBlitz