Rilasciata la 7.23.0: Metadati per Decoratori e tante nuove funzionalità per `import`!

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Abbiamo appena rilasciato Babel 7.23.0! 🎉

Include il supporto alla trasformazione per le proposte Decorator Metadata, Source Phase Import, Deferred Import Evaluation e Optional Chaining Assignment. Abbiamo anche aggiornato il parser per supportare la nuova versione TypeScript 5.2 e aggiunto un'opzione di trasformazione per utilizzare l'estensione .ts all'interno delle importazioni TypeScript.

Oltre al rilascio della versione 7.23.0, abbiamo recentemente pubblicato anche la prima release alpha di Babel 8!

Puoi consultare l'intero changelog su GitHub.

Se tu o la tua azienda volete supportare Babel e l'evoluzione di JavaScript, ma non sapete come, potete donare sul nostro Open Collective e, ancora meglio, collaborare direttamente con noi all'implementazione di nuove proposte ECMAScript! Essendo un progetto gestito da volontari, dipendiamo dal supporto della comunità per finanziare i nostri sforzi nel supportare la vasta gamma di utenti JavaScript. Contattaci a team@babeljs.io per discutere insieme!

Novità principali

Metadati per Decoratori (#15895)

La proposta Decorator Metadata allo Stage 3 estende la proposta Decorator, consentendo ai decoratori di comunicare tra loro condividendo metadati.

function write(_, context) {
  context.metadata.message = "Hello from writer!";
}
function read(_, context) {
  console.log(context.metadata.message);
}

@read // Logs "Hello from writer!"
class A {
  @write x;
}

Sebbene solitamente abbiamo un plugin per proposta, queste due sono così strettamente correlate che abbiamo deciso di includere il supporto per Decorator Metadata direttamente in @babel/plugin-proposal-decorators. Se utilizzi l'ultima versione di Babel e stai già usando decoratori standard, questa proposta è abilitata di default.

Importazioni in Fase Sorgente per moduli WebAssembly (#15829, #15870)

La proposta Source Phase Import allo Stage 3 consente di importare una rappresentazione oggetto del sorgente di un modulo, senza valutarlo e senza caricare le sue dipendenze. Puoi caricare i sorgenti dei moduli usando la sintassi import source, per linguaggi che hanno una rappresentazione sorgente definita:

import source fooSource from "foo";

Il caso d'uso principale è disporre di una sintassi statica per caricare oggetti WebAssembly.Module, anziché essere costretti a farlo dinamicamente:

// Before
const url = import.meta.resolve("./my-wasm/module.wasm");
const responsePromise = fetch(url);
const mod = await WebAssembly.compileStreaming(responsePromise);

// After
import source mod from "./my-wasm/module.wasm";

Babel ora supporta la trasformazione delle importazioni sorgente per moduli WebAssembly destinati a Node.js, ambienti compatibili con il Web (browser e Deno) o entrambi, in base ai targets configurati.

Puoi trasformarle utilizzando il plugin @babel/plugin-proposal-import-wasm-source:

{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-import-wasm-source"]
}

Valutazione Differita delle Importazioni (#15845, #15878)

La proposta Deferred Import Evaluation allo Stage 2 consente di differire la valutazione (sincrona) dei moduli importati finché non vengono utilizzati. Ciò può migliorare notevolmente le prestazioni di avvio del tuo codice quando si utilizzano moduli con un costo di inizializzazione significativo.

Puoi utilizzare la nuova sintassi import defer per differire le tue importazioni:

// this line does not evaluate ./mod
import defer * as myMod from "./mod";


later(() => {
  // this one evaluates it!
  use(myMod.foo);
})

La sintassi import defer supporta solo importazioni di namespace, quindi quanto segue non è valido:

import defer modDefault from "./mod";
import defer { named } from "./mod";

Babel supporta la compilazione di import defer solo quando si compilano moduli ECMAScript in CommonJS, utilizzando il plugin @babel/plugin-proposal-import-defer:

// babel.config.json
{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-import-defer"
  ]
}

Se stai utilizzando Babel con un bundler e quindi non stai compilando i moduli tramite Babel, qualora il tuo bundler supporti import defer puoi usare @babel/plugin-syntax-import-defer per consentire il parsing della nuova sintassi.

Assegnazione con Chaining Opzionale (#15751)

La proposta di Assegnazione con Chaining Opzionale allo Stage 1 consente di utilizzare il chaining opzionale sul lato sinistro degli operatori di assegnazione:

maybeAnObj?.prop = theValue;

// Equivalent to

if (maybeAnObj != null) maybeAnObj.prop = theValue;

Questa proposta è supportata da Nicolò Ribaudo, un membro del team di Babel, e la stiamo già implementando allo Stage 1 per raccogliere feedback che possa aiutare il processo di progettazione in TC39. Se avete commenti, esempi reali o casi d'uso da condividere, lasciateli nella repository della proposta!

Puoi provare questa proposta utilizzando il plugin @babel/plugin-proposal-optional-chaining-assign. Dato lo stadio iniziale e quindi l'alta possibilità di cambiamenti incompatibili, devi specificare quale versione vuoi usare (attualmente è supportata solo la 2023-07):

// babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-optional-chaining-assign", {
      "version": "2023-07"
    }]
  ]
}

Aggiornamenti TypeScript (#15896, #15913)

Babel 7.23.0 supporta ora l'analisi di TypeScript 5.2, la cui unica aggiunta sintattica è l'introduzione di tipi tupla con elementi sia etichettati che non etichettati.

In aggiunta, @babel/preset-typescript ha ora un'opzione rewriteImportExtensions che, se abilitata, riscriverà le estensioni .ts/.mts/.cts nelle dichiarazioni di import in .js/.mjs/.cjs. Insieme all'opzione allowImportingTsExtension di TypeScript, ciò ti consente di scrivere specificatori relativi completi nei tuoi import utilizzando la stessa estensione dei file che stai scrivendo.

Ad esempio, data questa struttura del progetto (dove src contiene i file sorgente e dist i file compilati):

.
├── src
│   ├── main.ts
│   └── dep.ts
├── dist
│   ├── main.js
│   └── dep.js
├── babel.config.json
└── tsconfig.json

e con i seguenti file di configurazione:

babel.config.json	tsconfig.json
{ "presets": [ ["@babel/preset-typescript", { "rewriteImportExtensions": true }] ] }	{ "compilerOptions": { "lib": ["esnext"], "noEmit": true, "isolatedModules": true, "moduleResolution": "nodenext", "allowImportingTsExtensions": true } }

potrai scrivere import x from "./dep.ts" in main.ts, e Babel lo trasformerà in import x from "./dep.js" durante la compilazione di main.ts in main.js.

Babel 8 alpha

Dopo diversi anni di lavoro, abbiamo finalmente rilasciato Babel 8.0.0 alpha! 🥳

Le future pre-release includeranno ulteriori cambiamenti incompatibili, quindi non ne raccomandiamo l'uso in produzione a meno che non siate disposti a tenere il passo con tutti i cambiamenti man mano che arrivano. Tuttavia, potete già iniziare a prepararvi per quella che sarà la versione stabile di Babel 8.0.0:

• Puoi installarlo con npm install -D @babel/core@next (o il comando equivalente con il tuo gestore di pacchetti) e verificare se funziona già nel tuo progetto. Assicurati che tutti i pacchetti @babel/* nel tuo package.json abbiano esattamente la stessa versione (ad esempio, 8.0.0-alpha.2).

• Puoi leggere la guida alla migrazione per gli utenti: molti dei cambiamenti incompatibili introdotti in Babel 8 possono già essere abilitati in Babel 7, e Babel 8 rimuoverà semplicemente le opzioni relative rendendole il comportamento predefinito.

• Se sei un autore di plugin Babel, o se usi direttamente l'API programmatica di Babel, puoi leggere la guida alla migrazione per gli autori di integrazioni e assicurarti che la tua libreria funzioni bene con Babel 8.

Oltre alle guide alla migrazione, puoi leggere il changelog completo delle varie pre-release di Babel 8 su GitHub.