Vai al contenuto principale

Rilasciata la versione 7.11.0: Supporto per ECMAScript 2021 in preset-env, TypeScript 4.0, visualizzazione configurazione e il futuro di `babel-eslint`

· Lettura di 6 min
Huáng Jùnliàng
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 una nuova versione minore di Babel!

Il rilascio 7.11 include:

  • Supporto in preset-env per assegnazioni logiche (??=), separatori numerici (1_2) e riesportazioni di namespace (export * as ns from ...)

  • Supporto per TypeScript 4.0

  • Supporto nel parser per la proposta Stage-1 dei Decimali (7.11m)

  • Un flag d'ambiente per visualizzare la configurazione Babel risolta per un file specifico (BABEL_SHOW_CONFIG_FOR)

Inoltre, rilasciamo ufficialmente il successore di babel-eslint: @babel/eslint-parser!

Puoi consultare l'intero changelog su GitHub.

Se hai domande o argomenti da discutere, abbiamo attivato le GitHub Discussions nel nostro repository!

Se tu o la tua azienda volete supportare Babel e l'evoluzione di JavaScript, potete donare sul nostro Open Collective o, meglio ancora, collaborare direttamente all'implementazione di nuove proposte ECMAScript! Come progetto guidato da volontari, dipendiamo dal supporto della comunità per finanziare il nostro lavoro a beneficio degli utenti JavaScript. Contattateci a team@babeljs.io per discutere!

Supporto per ECMAScript 2021 (#11864)​

Nell'ultima riunione, il TC39 ha promosso a Stage 4 sia le proposte per le assegnazioni logiche che per i separatori numerici! Babel supportava già queste funzionalità tramite i plugin @babel/plugin-proposal-logical-assignment-operators e @babel/plugin-proposal-numeric-separators. Ora sono integrati in @babel/preset-env e compilati in base ai tuoi target, come qualsiasi altra funzionalità ECMAScript.

Assegnazioni logiche​

Le assegnazioni logiche offrono una sintassi compatta che combina operatori logici ed espressioni di assegnazione:

JavaScript
this.disabled ??= false;
this.disabled ?? (this.disabled = false);

clicked &&= !isDoubleClicked();
clicked = clicked && !isDoubleClicked();

hasDups ||= (prev === cur);
if (!hasDup) hasDups = (prev === cur);

Separatori numerici​

Il separatore numerico (_) è un carattere inseribile tra le cifre nei letterali numerici per migliorare la separazione visiva:

JavaScript
1_000_000_000
0.000_000_000_1

Riesportazione namespace (#11849)​

Un modulo importato può essere riesportato come nuovo namespace:

JavaScript
export * as ns from "mod";
nota

Questa funzionalità era già inclusa in ECMAScript 2020, ma non era ancora supportata da @babel/preset-env.

Dalla versione 7.11, @babel/preset-env ignora @babel/plugin-proposal-export-namespace-from se il caller supporta la sintassi: ciò permette di lasciare export * as ns intatto per l'elaborazione diretta dai bundler. Nota: babel-loader e @rollup/plugin-babel non comunicano ancora a Babel il supporto di questa sintassi, ma stiamo collaborando con i maintainer per risolvere.

Se è impostato { modules: false }, Babel presuppone che il codice transpilato verrà eseguito in ambienti con supporto nativo per ESM. export * as ns verrà compilato in base ai targets, come qualsiasi altra funzionalità ECMAScript.

Se intendi bundleare il codice transpilato, rimuovi l'opzione { modules: false }. Di default preset-env determinerà le trasformazioni dei moduli dai dati caller passati da babel-loader e @rollup/plugin-babel.

{
  "presets": [
    ["@babel/env", {
      "targets": ["defaults"],
-     "modules": false,
    }]
}

Se specifichi un valore diverso per l'opzione modules, export * as ns verrà sempre trasformato.

Se stavi utilizzando direttamente uno dei seguenti:

  • @babel/plugin-proposal-export-namespace-from

  • @babel/plugin-proposal-logical-assignment-operators

  • @babel/plugin-proposal-numeric-separators

puoi rimuoverli dalla tua configurazione poiché sono ora inclusi di default:

{
  "presets": [
    ["@babel/env", { "targets": ["defaults"] }]
  ],
  "plugins": [
-   "@babel/plugin-proposal-export-namespace-from",
-   "@babel/plugin-proposal-logical-assignment-operators",
-   "@babel/plugin-proposal-numeric-separators"
  ]
}

Supporto per TypeScript 4.0 (#11760)​

TypeScript 4.0 introduce diverse nuove funzionalità.

Variadic Tuple Types​

Ora puoi specificare spread generici nei tipi tupla, e gli spread possono trovarsi in qualsiasi posizione:

type Arr = readonly any[];

function collect<L extends Arr, M extends Arr>(b: boolean, l: L, m: M): [boolean, ...L, ...M] {
  return [b, ...l, ...m];
}

Labeled Tuple Elements​

Gli elementi delle tuple possono ora essere etichettati:

type Log = [failed: boolean, reason?: Error, ...stacks?: string[]]
// same as
type Log = [boolean, Error?, string[]?];

unknown nelle associazioni delle clausole catch​

Puoi specificare il tipo unknown per le variabili delle clausole catch:

try {
  // ...
} catch (e: unknown) {
  // type error! Error() only accepts string | undefined
  throw new Error(e);

  if (typeof e === "string") {
    // e is a string
    throw new Error(e);
  }
}

Nota che attualmente sono consentiti solo unknown e any nelle annotazioni di tipo per le associazioni catch. @babel/parser non applica questo controllo poiché né gli alias di tipo (type ANY = any) né le intersezioni (any | unknown) vengono valutate al momento della compilazione.

A partire da Babel 7.11, puoi utilizzare queste nuove funzionalità senza modificare la configurazione. Per maggiori informazioni, consulta l'annuncio di TypeScript 4.0.

Supporto parser per Decimal Literal (#11640)​

La proposta Decimal Literal (Stage 1) fornisce una notazione per numeri decimali, analoga a BigInt e interi.

JavaScript
0.1m + 0.2m === 0.3m; // true

Babel supporta ora l'analisi di questi letterali: puoi aggiungere il plugin @babel/plugin-syntax-decimal alla tua configurazione Babel o, se usi direttamente @babel/parser, abilitare il plugin decimal. Babel non fornisce implementazioni di polyfill per i decimali.

Babel può essere configurato in vari modi (programmaticamente e tramite file JSON/JavaScript). Questa flessibilità ha però un costo: può essere difficile capire quali file di configurazione siano applicabili nel tuo progetto e come Babel combini queste configurazioni. Potresti inoltre utilizzare Babel indirettamente con configurazioni generate da pacchetti nei tuoi node_modules. Questi casi d'uso evidenziano la necessità di visualizzare le informazioni di configurazione per il debug dei problemi di compilazione.

Babel 7.11 offre a questo scopo una variabile d'ambiente:

Shell
# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start
$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

stamperà la configurazione effettiva applicata a src/myComponent.jsx.

Consulta la sezione configuration per utilizzo dettagliato ed esempi di output.

@babel/eslint-parser (#10709)​

babel-eslint è stato migrato nel monorepo di Babel con un nuovo nome: @babel/eslint-parser. Offre una migliore integrazione tra Babel e ESLint e include il supporto completo per ES2020. Nel post del blog State of babel-eslint, Kai ha approfondito lo stato attuale di @babel/eslint-parser.