7.21.0 Rilasciato: modificatori inline per RegExp, TypeScript 5.0 e aggiornamenti ai Decoratori

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 pubblicato Babel 7.21.0!

Babel supporta ora la proposta Inline RegExp modifiers, l'ultima versione della proposta Decoratori e la nuova sintassi di TypeScript 5.0.

Potete leggere 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

Modificatori inline per RegExp

La proposta Inline RegExp modifiers allo Stage 3 consente di abilitare o disabilitare i flag i, m e s per parte di un'espressione regolare, senza influenzare le altre parti.

Potete usare la sintassi (?enableFlags:subPattern) per abilitare flag, (?-disableFlags:subPattern) per disabilitarli, e (?enableFlags-disableFlags:subPattern) per abilitarne alcuni e disabilitarne altri contemporaneamente. Potete considerare il gruppo non catturante (?:subPattern) come un caso speciale in cui nessun flag viene modificato.

Ad esempio, /(?i:a)a/ corrisponde a una a ignorandone il case, seguita da una a minuscola:

JavaScript

/(?i:a)a/.test("aa"); // true
/(?i:a)a/.test("Aa"); // true
/(?i:a)a/.test("aA"); // false

/a(?-i:a)/i è equivalente: l'espressione regolare è case insensitive, eccetto per la seconda a che deve essere minuscola.

Potete abilitare questa proposta installando il pacchetto @babel/plugin-proposal-regexp-modifiers e aggiungendolo alla vostra configurazione Babel:

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    // Add this!
    "@babel/plugin-proposal-regexp-modifiers"
  ]
}

Aggiornamenti ai Decoratori

TC39, il comitato che standardizza JavaScript, ha approvato recentemente alcune modifiche alla proposta Decoratori basate sul feedback del team TypeScript.

• I decoratori per le classi esportate possono ora essere posizionati prima o dopo la parola chiave export, ma non in entrambe le posizioni contemporaneamente:

  JavaScript

  // valid
  @dec
  export class A {}
  
  // valid
  export @dec class B {}
  
  // invalid
  @dec
  export @dec class C {}

  Questa restrizione allentata mira a semplificare la migrazione dalla versione "legacy" dei decoratori, riducendo le differenze sintattiche.

• I metodi dell'oggetto context.access fornito ai decoratori si aspettano l'oggetto target come loro primo parametro, anziché come ricevitore this:

  JavaScript

  let accessX;
  
  function dec(desc, context) {
    accessX = context.access;
    return dec;
  }
  
  class A {
    @dec #x = 1;
  }
  
  // old semantics
  accessX.get.call(new A) === 1;
  
  // new semantics
  accessX.get(new A) === 1;

• context.access ha un nuovo metodo .has per verificare se un oggetto contiene l'elemento corrispondente. Continuando l'esempio precedente:

  JavaScript

  // #x in new A
  accessX.has(new A) === true;

Potete abilitare questa nuova versione della proposta dei decoratori impostando l'opzione version di "@babel/plugin-proposal-decorators" a "2023-01":

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-01" }]
  ]
}

Puoi anche provare la nuova proposta dei decoratori nel REPL online di Babel, abilitando il preset "Stage 3" (o inferiore) nella barra laterale e selezionando la versione 2023-01 per i decoratori.

TypeScript 5.0

TypeScript 5.0, attualmente disponibile come prerelease beta, introduce due nuove funzionalità sintattiche:

• Modificatori const per i parametri di tipo

  TypeScript

  function getName<const T extends { name: string }>(user: T): T["name"] {
      return user.name;
  }
  
  let name = getName({ name: "Babel" });
  //  ^? inferred type: "Babel", instead of just string.

• Dichiarazioni export type *

  TypeScript

  export type * from "./mod";
  export type * as ns from "./mod";

  Babel utilizza questa nuova sintassi per rimuovere in modo sicuro la dichiarazione di re-export durante la compilazione da TypeScript a JavaScript.

Inoltre, TypeScript 5.0 introduce il supporto per la proposta standard dei Decorators, che puoi abilitare in Babel tramite @babel/plugin-proposal-decorators.

Puoi scoprire di più sulle nuove funzionalità di TypeScript nel loro post di rilascio!

Supporto sperimentale per file di configurazione .cts

Se hai installato @babel/preset-typescript o stai eseguendo Babel con ts-node, ora puoi utilizzare babel.config.cts come file di configurazione Babel scritto in TypeScript e CommonJS. Maggiori dettagli sono disponibili nella documentazione.

Non è ancora possibile utilizzare file babel.config.ts e babel.config.mts, in attesa della stabilizzazione delle API Node.js ESM loader.

Miglioramenti alle source map

Le source map generate da Babel ora supportano Friendly Call Frames, per mostrare nomi più chiari per le funzioni trasformate nei devtools.

Inoltre, @babel/generator ora accetta source map di input generate da altri strumenti nella pipeline di build: ciò consente di unire correttamente le source map anche quando si utilizza @babel/generator direttamente senza @babel/core, migliorando le prestazioni generali dell'unione delle source map durante l'uso di Babel.