Como resolver APIs do Node.js por meio de polyfills

Através da Azion CLI, você pode inicializar uma aplicação baseada em templates ou vincular um projeto existente. A lista de web frameworks inclui Next.js, React, Vue, Angular, Astro, JavaScript e outros. Esses frameworks JavaScript são executados no edge da Azion, em cima do Azion Edge Runtime.

Os projetos com esses frameworks geralmente fazem uso de APIs de Node.js. Através do processo de build da Azion, realizado pelo Vulcan, essas APIs são resolvidas através do uso de polyfills.

Este guia mostrará como usar a API Buffer do Node.js através de polyfills em um projeto JavaScript na Azion usando a Azion CLI e o Vulcan.


Antes de começar, você deve ter:


  1. No terminal, inicialize o projeto:
Terminal window
azion init
  1. Digite o nome polyfills-guide:
Terminal window
Your application's name: (glorious-curiosity) polyfills-guide
  1. Escolha o template de JavaScript:
Terminal window
Getting templates available? Choose a template for your project: (Use arrow keys)
>Javascript
Angular
Astro
Hexo
Next
React
Vue
Vite
  1. Digite y para iniciar um servidor de desenvolvimento local.

  2. Digite y para instalar as dependências do projeto.

  3. Escolha um gerenciador de pacotes.

  4. Acesse a porta que foi retornada no terminal. Exemplo:

Terminal window
[Vulcan] [Server] › ✔ success Function running on port 0.0.0.0:3000, url: http://localhost:3000
  1. Retorne ao terminal e encerre o processo.

  2. Acesse seu projeto:

Terminal window
cd polyfills-guide
  1. Crie o arquivo vulcan.config.js e cole as seguintes propriedades:
polyfills-guide/vulcan.config.js
module.exports = {
entry: 'main.js',
builder: 'webpack',
useNodePolyfills: true,
};
  1. Após aplicar estas configurações, você pode importar as APIs necessárias para o seu projeto. Neste exemplo, estamos usando a API Buffer do Node.js:

Dentro do arquivo main.js:

polyfills-guide/main.js
// Importe a classe Buffer do módulo 'buffer' no Node.js
import { Buffer } from 'node:buffer';
// Defina uma função chamada 'myWorker' que pega um evento como argumento
export default function myWorker(event) {
// Crie uma nova instância de Buffer 'buf1' a partir da string "x"
var buf1 = Buffer.from("x");
// Crie uma nova instância de Buffer 'buf2' a partir da string "x"
var buf2 = Buffer.from("x");
// Compare 'buf1' e 'buf2' usando o método Buffer.compare,
// que retorna um número indicando a igualdade dos buffers
var a = Buffer.compare(buf1, buf2);
// O resultado será 0, pois ambos os buffers são iguais
console.log(a);
// Agora, vamos trocar os valores de 'buf1' e 'buf2'
buf1 = Buffer.from("y");
buf2 = Buffer.from("x");
// Compare 'buf1' e 'buf2' novamente
a = Buffer.compare(buf1, buf2);
// Aqui, o resultado será 1
console.log(a);
// A função retorna um novo objeto Response com a string "Testando buffer polyfills"
return new Response("Testando polyfills");
}
  1. Execute o projeto localmente rodando:
Terminal window
azion dev

Agora você pode verificar os logs no terminal e ver a API Buffer funcionando através de polyfills.