7.26.0 rilasciato: funzionalità stage 4 abilitate di default e nuova sperimentale code printer
Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →
Babel 7.26.0 è appena stato rilasciato!
Abilita di default il supporto per due proposte ECMAScript diventate standard nell'ultimo meeting TC39: import attributes e inline regular expression modifiers, oltre al parsing di Flow enums.
Babel ora permette anche ai plugin di fornire hook asincroni pre/post e include una [modalità sperimentale](TODO: Link) per preservare le posizioni dei token durante la generazione dell'output trasformato.
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
Modificatori inline per RegExp (#16692)
I modificatori inline per espressioni regolari permettono di abilitare o disabilitare i flag i/m/s solo per parte di un'espressione regolare. Ad esempio, /hello (?i:world)/ corrisponde a qualsiasi stringa contenente "hello " così com'è, seguita da "world" con qualsiasi combinazione di maiuscole/minuscole: hello world e hello WoRlD corrispondono, mentre Hello world no.
La proposta ha raggiunto lo Stage 4 nell'incontro TC39 di ottobre 2024 e sarà inclusa nella prossima versione dello standard JavaScript. @babel/preset-env ora trasporrà automaticamente questa funzionalità in base ai tuoi target di compilazione, e puoi rimuovere tranquillamente @babel/plugin-proposal-regexp-modifiers dalla tua configurazione.
Se per qualsiasi motivo devi ancora elencare esplicitamente il plugin, questo è stato rinominato in @babel/plugin-transform-regexp-modifiers poiché la proposta è diventata una funzionalità standard del linguaggio.
Attributi di import (#16579)
Anche la proposta degli attributi di import ha raggiunto lo Stage 4 nell'incontro TC39 di ottobre 2024. Supporta la fornitura di parametri alla piattaforma sottostante per indicare come caricare i moduli:
import "./my-module" with { some_param: "hello" };
Attualmente, l'unico attributo ampiamente supportato è type, utilizzabile per importare moduli JSON o (sul web) CSS:
import data from "./data" with { type: "json" };
Babel ora analizza di default gli attributi di import, quindi puoi rimuovere tranquillamente @babel/plugin-syntax-import-attributes e @babel/plugin-syntax-import-assertions dalla tua configurazione.
La vecchia sintassi, che utilizza assert invece di with, è stata rimossa dalla proposta. Di default Babel non la analizzerà.
Poiché è diventata una funzionalità JavaScript standard, @babel/plugin-proposal-json-modules è stata rinominata in @babel/plugin-transform-json-modules. Nota che questo plugin non è incluso in @babel/preset-env, poiché vorrai usarlo solo se non utilizzi un bundler o se il tuo bundler non supporta l'importazione di moduli JSON.
Riscrittura estensioni .ts in import() dinamico (#16794)
Babel supporta la riscrittura delle estensioni .ts in .js nelle dichiarazioni di import dallo scorso anno, utilizzando l'opzione rewriteImportExtensions di @babel/preset-typescript:
// Input
import { hello } from "./dep.ts";
let myVar: number = hello();
// Output
import { hello } from "./dep.js";
let myVar = hello();
Siamo lieti di vedere che TypeScript sta introducendo un'opzione simile. Tuttavia, esiste una differenza: Babel trasformava i percorsi solo nelle dichiarazioni di import statiche (poiché sono le uniche che possono essere sempre analizzate staticamente), mentre TypeScript supporterà anche la riscrittura nelle espressioni di import dinamiche.
Babel 7.26 si allinea al comportamento futuro di TypeScript, riscrivendo anche le estensioni nei import() dinamici:
// Input
await import("./dep.ts");
await import(url);
// Output
await import("./dep.js");
await import(url.replace(/\.ts$/, ".js")); // simplified