7.15.0 Rilasciato: Pipeline in stile Hack, enum const di TypeScript e supporto per target Rhino

Traduzione Beta Non Ufficiale

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

Questa versione abilita di default il parsing del top-level await (Stage 4 al meeting di maggio) e la trasformazione degli ergonomic brand check per campi privati (Stage 4 al meeting di luglio). È stato aggiunto anche il supporto per l'operatore pipeline in stile Hack. Abbiamo inoltre migliorato il supporto per TypeScript, implementando la trasformazione per gli enum const e gli alias di namespace, e abbiamo esteso le nostre euristiche per aggiungere .displayName ai componenti React creati con React.createContext() (#13501).

Abbiamo introdotto anche una nuova assunzione del compilatore, noIncompleteNsImportDetection, per produrre un output più piccolo durante la compilazione da moduli ECMAScript a CommonJS senza preoccuparsi di import di namespace parzialmente inizializzati causati da cicli tra moduli.

Inoltre, è ora possibile specificare Rhino come target di compilazione.

Puoi leggere l'intero changelog su GitHub.

Siamo estremamente grati per tutto il supporto che la community ci ha dimostrato negli ultimi mesi, dall'aggiornamento sul finanziamento di maggio. Contattaci a team@babeljs.io se vuoi discutere di sponsorizzazioni!

Novità principali

Funzionalità ECMAScript abilitate di default

Negli ultimi due meeting, le proposte per il top-level await e per gli ergonomic brand check per campi privati hanno raggiunto lo Stage 4.

JavaScript

import * as db from "database";

await db.connect(); // top-level await

class DBConnector {
  #password;
  static isConnector(obj) {
    return #password in obj; // ergonomic brand checks
  }
}

Babel ora le supporta di default, quindi puoi rimuovere i seguenti plugin dalla tua configurazione:

• @babel/plugin-syntax-top-level-await

• @babel/plugin-syntax-private-property-in-object

• @babel/plugin-proposal-private-property-in-object

Nota che Babel attualmente può solo analizzare sintatticamente il top-level await ma non trasformarlo.

Nuove funzionalità TypeScript (#13324, #13528)

TypeScript 4.4 non include nuove sintassi che abbiamo dovuto implementare, a parte una piccola restrizione: non è possibile specificare il valore di un campo di classe astratta.

abstract class C {
    abstract prop = 1; // now a SyntaxError!
}

Tuttavia, abbiamo aggiunto due funzionalità TypeScript che mancavano da tempo: gli enum const e gli alias di namespace (import Alias = Namespace).

In precedenza segnalavamo un errore quando si usavano enum const poiché richiedono informazioni sui tipi per essere compilati correttamente. Come soluzione alternativa, la community ha creato plugin come babel-plugin-const-enum. Babel ora ignora il modificatore const durante la compilazione degli enum, allineandosi al comportamento di TypeScript quando si usa l'opzione --isolatedModules.

Se desideri un output più ottimizzato simile al codice predefinito prodotto da TypeScript, puoi abilitare l'opzione optimizeConstEnums di @babel/plugin-tranform-typescript o @babel/preset-typescript.

// Input
const enum Animals { Dog }
console.log(Animals.Dog);

// Output (default)
var Animals;
(function (Animals) {
  Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));

console.log(Animals.Dog);

// Output with `optimizeConstEnums`
console.log(0);

Supporto per l'operatore pipeline in stile Hack (#13191, #13416)

Le "pipeline in stile Hack" rappresentano una nuova variante della proposta dell'operatore pipeline, concepita per sostituire la variante "smart mix".

Le pipeline in stile Hack richiedono di utilizzare sempre un "token topic" (come #) per riferirsi al valore del passaggio precedente:

JavaScript

// Input
"World"
  |> `Hello, ${#}!`
  |> alert(#);

// output
var _ref, _ref2;

_ref2 = (_ref = "World", `Hello, ${_ref}!`), alert(_ref2);

È possibile testare questa proposta abilitando l'opzione proposal: "hack" in @babel/plugin-proposal-pipeline-operator. È necessario inoltre scegliere quale token topic utilizzare tra "#" e "%":

babel.config.json

{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "#"
    }]
  ]
}

Preparazione di @babel/eslint-parser per Babel 8 (#13398)

Nei mesi scorsi abbiamo continuato a lavorare gradualmente su Babel 8. Non siamo ancora pronti per una versione beta di Babel 8, ma stiamo iniziando a esporre le prime modifiche sperimentali.

Pianifichiamo di convertire completamente Babel da CommonJS a moduli ECMAScript, ma questo comporta un problema: il caricamento della configurazione diventerà più spesso asincrono, mentre @babel/eslint-parser può funzionare solo in modo sincrono (poiché ESLint supporta esclusivamente parser sincroni).

@babel/eslint-parser 7.15.0 espone un nuovo entry-point: @babel/eslint-parser/experimental-worker. Sposta il caricamento della configurazione Babel e l'attività di parsing in un worker separato gestito in modo sincrono dal thread principale, supportando comunque il caricamento asincrono della configurazione. Come vantaggio immediato per Babel 7, consente di utilizzare moduli ECMAScript nativi per i file di configurazione di Babel anche quando si usa @babel/eslint-parser.

Potete aiutarci testandolo nei vostri progetti esistenti e segnalando eventuali bug sulla nostra pagina delle issue:

JavaScript

// .eslintrc.js
module.exports = {
  parser: "@babel/eslint-parser/experimental-worker"
};

informazioni

Questo entry-point richiede Node.js >= 12.3.0