Rilasciata la 7.22.0: Supporto per Explicit Resource Management e parsing degli Import Attributes

Traduzione Beta Non Ufficiale

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

Babel 7.22.0 è disponibile, con supporto per il parsing e la trasformazione della proposta Explicit Resource Management, incluse sia le varianti sincrone che asincrone, e con supporto per il parsing degli Import Attributes (un'evoluzione della precedente proposta Import Assertions).

Abbiamo anche aggiornato la nostra implementazione dei decoratori seguendo alcune modifiche alla proposta e aggiunto il supporto per le istruzioni TypeScript import ... = e export ... =.

@babel/preset-env include ora per impostazione predefinita il supporto per la trasformazione del flag v delle espressioni regolari, recentemente approvato come parte dello standard ECMAScript. Infine, abbiamo rinominato tutti i plugin per le funzionalità ECMAScript stabili da -proposal- a -transform-.

È possibile 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

Explicit Resource Management (#15633, #15520)

La proposta di Stage 3 Explicit Resource Management consente di definire variabili contenenti risorse che verranno "disposed" quando si esce dallo scope in cui sono dichiarate. Ciò avviene tramite le dichiarazioni using (per il disposal sincrono) e await using (per il disposal asincrono):

JavaScript

{
  using fileHandle = filesystem.open("./my/file.txt");

  write(fileHandle, "Hello!");
} // At the end of the block, fileHandle will be automatically closed.

JavaScript

{
  await using db = await Database.connect("//my-db.sql");
  db.query("INSERT INTO tools (name, version) VALUES ('Babel', '7.22.0')");
} // At the end of the block, the db connection will be closed asynchronously

È possibile abilitare il supporto per questa proposta aggiungendo @babel/plugin-proposal-explicit-resource-management alla configurazione di Babel:

babel.config.json

 {
   "plugins": [
     "@babel/plugin-proposal-explicit-resource-management"
   ]
 }

Puoi anche provare questa proposta nel nostro REPL.

Import Attributes (#15536, #15620)

La sintassi della proposta "import assertions" è stata modificata per utilizzare la parola chiave with invece di assert, e la proposta è stata rinominata in "import attributes":

JavaScript

import json from "./foo.json" with { type: "json" };

import("./foo.json", { with: { type: "json" } });

Abbiamo implementato il supporto di parsing per questa nuova versione della proposta, che può essere abilitato utilizzando il plugin @babel/plugin-syntax-import-attributes (o, se si utilizza direttamente @babel/parser, importAttributes):

babel.config.json

 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/syntax-import-attributes"
   ]
 }

Puoi approfondire le modifiche alla proposta nelle slide presentate all'incontro TC39 di marzo e le motivazioni nelle slide presentate all'incontro TC39 di gennaio.

attenzione

@babel/plugin-syntax-import-assertions continuerà a funzionare fino al rilascio di Babel 8.0.0, ma non sarà più mantenuto. Si raccomanda vivamente di migrare al nuovo plugin.

Per facilitare la migrazione da with a assert, se esegui il codice compilato con Babel solo in strumenti e runtime che supportano la sintassi legacy ma non ancora la nuova (come Node.js 20 o Rollup 3.21), puoi utilizzare @babel/plugin-proposal-import-attributes-to-assertions:

babel.config.json

 {
   "plugins": [
-    "@babel/syntax-import-assertions",
+    "@babel/plugin-proposal-import-attributes-to-assertions"
   ]
 }

🛑 Nota: questo plugin genera codice deprecato che non funzionerà in strumenti e runtime che supportano esclusivamente la sintassi with ora descritta dalla proposta.

Aggiornamenti ai Decoratori (#15570)

Il comitato TC39 ha ricevuto ulteriori feedback da strumenti e motori JavaScript che implementano i decoratori, perfezionando la proposta e progettando varie modifiche e correzioni in risposta.

Le modifiche rilevanti per gli utenti Babel sono:

• I campi statici accessor ora funzionano con classi derivate:

  JavaScript

  class Base {
    static accessor x = 2;
  }
  class Derived extends Base {}
  
  Derived.x; // Used to throw, now returns `2`

• I decoratori memorizzati in proprietà di oggetti vengono ora chiamati usando l'oggetto come this invece di undefined:

  JavaScript

  let MyDecs = {
    dec() {
      console.log(this); // Now logs `MyDecs` instead of `undefined`
    }
  };
  
  @MyDecs.dec class {}

Puoi utilizzare questa nuova versione dei decoratori passando l'opzione version: "2023-05" al plugin decoratori:

babel.config.json

 {
   "plugins": [
     ["@babel/plugin-proposal-decorators", {
       "version": "2023-05"
     }]
   ]
 }

Puoi anche provare la nuova versione della proposta nel nostro REPL, abilitando il preset "Stage 3" e selezionando l'appropriata versione dei decoratori.

Istruzioni TypeScript import ... = e export =

Quando si utilizza l'opzione TypeScript verbatimModuleSyntax, le istruzioni ESM import/export sono vietate nei file CommonJS. Gli sviluppatori devono invece utilizzare le istruzioni import ... = ed export =:

TypeScript

import A = require("./a");

export = { x: 2 };

che vengono tradotte in:

JavaScript

const A = require("./a");

module.exports = { x: 2 };

Questa sintassi è supportata solo nei moduli ECMAScript e unicamente durante la loro compilazione in CommonJS. A meno di configurazioni personalizzate, ciò significa:

• nei file .cts, quando si utilizza @babel/preset-typescript

• nei file .ts scritti come ESM e compilati con @babel/plugin-transform-modules-commonjs

Pacchetti rinominati

D'ora in poi, rinomineremo i plugin con suffisso -proposal- in -transform- una volta raggiunto lo Stage 4 nel processo di standardizzazione e diventati quindi stabili. I seguenti pacchetti sono stati rinominati:

Old name	New name	ECMAScript version
@babel/plugin-proposal-unicode-sets-regex	@babel/plugin-transform-unicode-sets-regex	ES2024
@babel/plugin-proposal-class-static-block	@babel/plugin-transform-class-static-block	ES2022
@babel/plugin-proposal-private-property-in-object	@babel/plugin-transform-private-property-in-object	ES2022
@babel/plugin-proposal-class-properties	@babel/plugin-transform-class-properties	ES2022
@babel/plugin-proposal-private-methods	@babel/plugin-transform-private-methods
@babel/plugin-proposal-numeric-separator	@babel/plugin-transform-numeric-separator	ES2021
@babel/plugin-proposal-logical-assignment-operators	@babel/plugin-transform-logical-assignment-operators	ES2021
@babel/plugin-proposal-nullish-coalescing-operator	@babel/plugin-transform-nullish-coalescing-operator	ES2020
@babel/plugin-proposal-optional-chaining	@babel/plugin-transform-optional-chaining	ES2020
@babel/plugin-proposal-export-namespace-from	@babel/plugin-transform-export-namespace-from	ES2020
@babel/plugin-proposal-json-strings	@babel/plugin-transform-json-strings	ES2019
@babel/plugin-proposal-optional-catch-binding	@babel/plugin-transform-optional-catch-binding	ES2019
@babel/plugin-proposal-async-generator-functions	@babel/plugin-transform-async-generator-functions	ES2018
@babel/plugin-proposal-object-rest-spread	@babel/plugin-transform-object-rest-spread	ES2018
@babel/plugin-proposal-unicode-property-regex	@babel/plugin-transform-unicode-property-regex	ES2018

Questi plugin sono inclusi per impostazione predefinita in @babel/preset-env: se utilizzi il preset, non è necessario elencarli esplicitamente nella configurazione e pertanto questa modifica non ti riguarderà. I pacchetti con il vecchio nome non riceveranno più aggiornamenti.