Vai al contenuto principale

7.13.0 Pubblicata: Records e Tuples, assunzioni granulari del compilatore e target di alto livello

· Lettura di 7 min
Nicolò Ribaudo
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.13.0, la prima release minore del 2021!

Questa release include importanti funzionalità per @babel/core: un'opzione targets (simile a quella di @babel/preset-env) condivisibile tra diversi plugin, un'opzione assumptions per ottimizzare la configurazione producendo output di compilazione più compatto e il supporto per plugin e preset scritti con moduli ECMAScript nativi.

Babel supporta ora la trasformazione della proposta ECMAScript Records and Tuples, che introduce strutture dati immutabili e uguaglianza strutturale in JavaScript, e il parsing della proposta Module Blocks.

Inoltre, abbiamo aggiunto il supporto per nuove funzionalità di Flow e TypeScript.

Il changelog completo è disponibile su GitHub.

Aggiornamento sui finanziamenti​

Abbiamo aderito al programma "GitHub Sponsors for organizations", quindi ora puoi sostenerci direttamente tramite GitHub 😊.

Questi fondi supportano il nostro team (attualmente un maintainer full-time e tre part-time) nel migliorare la stabilità e sviluppare nuove funzionalità.

Donazioni e spese sono tracciate pubblicamente sulla nostra pagina Open Collective, dove registreremo anche le donazioni da GitHub Sponsors.

Accogliamo donazioni da privati e aziende. Se la tua azienda vuole diventare sponsor Gold tier ($1k/mese) e discutere ulteriormente, scrivi a team@babeljs.io!

Novità principali​

Opzione targets di alto livello (#12189, RFC)​

L'opzione targets di @babel/preset-env consente di specificare gli ambienti target, scegliendo automaticamente la sintassi da trasformare e i polyfill da includere. Dopo il rilascio di @babel/preset-env, abbiamo osservato che anche i plugin stessi traggono vantaggio dalla conoscenza dei tuoi target. Attualmente ciò richiede di specificarli due volte (ad esempio con i nostri nuovi plugin per polyfill). Con l'introduzione di targets come opzione di alto livello, basta specificarli una sola volta:

Old configurationNew configuration
babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
        "targets": ">1%, not ie 11"
    }]
  ],
  "plugins": [
    ["polyfill-es-shims", {
      "targets": ">1%, not ie 11"
    }]
  ]
}
JSON
{
  "targets": ">1%, not ie 11",
  "presets": ["@babel/preset-env"],
  "plugins": ["polyfill-es-shims"]
}

Raccomandiamo di migrare la configurazione Babel alla nuova opzione targets di alto livello per questi ulteriori vantaggi:

  1. Gestione migliorata del target esmodules: true (viene intersecato con altri target anziché sostituirli)

  2. Beneficerai automaticamente di output più ottimizzati man mano che aggiungeremo supporto legato ai targets nei plugin!

Maggiori dettagli su questa opzione sono disponibili nella sua RFC.

🔮 In futuro potremmo integrare @babel/preset-env in @babel/core per evitare l'installazione di pacchetti aggiuntivi. Questa nuova opzione rappresenta il primo passo in quella direzione!

Opzione assumptions di alto livello (#12219, RFC)​

Molti dei nostri plugin hanno un'opzione loose che indica a Babel di generare output più compatto/veloce facendo determinate assunzioni sul codice e ignorando alcuni casi limite specificati nello standard JavaScript.

Tuttavia, loose presenta alcuni problemi che causano confusione: il termine stesso non aiuta a descrivere come influisce esattamente sul comportamento del compilatore e, peggio, a volte richiede di configurare più plugin per garantire una corretta compilazione.

Per risolvere questi problemi, abbiamo aggiunto una nuova opzione globale per comunicare a Babel quali assunzioni può fare sul codice: assumptions! Similmente alla nuova opzione targets, ogni plugin riceverà ora le assunzioni abilitate, eliminando la necessità di impostarle singolarmente. Questo è particolarmente prezioso poiché un plugin può essere influenzato da più assunzioni, e un'assunzione può influenzare più plugin.

attenzione

Questa è funzionalità avanzata. Come la precedente opzione loose, abilitare assunzioni richiede cautela poiché non sono conformi alle specifiche e potrebbero causare comportamenti inattesi nel codice.

Ad esempio, durante la trasformazione delle classi, Babel genera questo output per impostazione predefinita:

InputOutput
JavaScript
class Test {
  constructor() {
    this.x = 2;
  }
}

// You can test the thrown error in the console:
// Uncaught TypeError: class constructors must be invoked with 'new'
Test();
JavaScript
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

let Test = function Test() {
  _classCallCheck(this, Test);

  this.x = 2;
};

// You can test the thrown error in the console:
// Uncaught TypeError: class constructors must be invoked with 'new'
Test();

Tuttavia, abilitare l'assunzione noClassCalls dice a Babel "Non sto mai tentando di chiamare classi senza new, quindi puoi compilare senza preoccupartene":

JSON
{
  "targets": "firefox 30",
  "assumptions": { "noClassCalls": true },
  "presets": ["@babel/preset-env"]
}
InputOutput
JavaScript
class Test {
  constructor() {
    this.x = 2;
  }
}

// Won't throw since we violated the assumption
Test();
JavaScript
let Test = function Test() {
  this.x = 2;
};

// Won't throw since we violated the assumption
Test();

Consulta l'elenco completo delle assunzioni nella nostra documentazione, dove puoi abilitarle/disabilitarle singolarmente per verificarne l'effetto sull'output compilato.

Supporto per Record e Tuple (#12145)​

Grazie a una collaborazione con Bloomberg, Babel supporta ora la trasformazione della proposta "Records and Tuples" (stage 2).

Il plugin Babel trasforma la sintassi dei record e tuple utilizzando le funzioni globali Record e Tuple:

InputOutput
JavaScript
let data = #{
  name: "Babel",
  ids: #[1, 2, 3]
};
JavaScript
let data = Record({
  name: "Babel",
  ids: Tuple(1, 2, 3),
});

Ciò significa che sarà necessario caricare un polyfill per queste funzioni globali, come @bloomberg/record-tuple-polyfill, importandolo nel codice o tramite tag <script>:

<script src="https://unpkg.com/@bloomberg/record-tuple-polyfill@0.0.3/lib/index.umd.js" />

NOTA: Nessun motore supporta attualmente record e tuple, quindi è sempre necessario caricare il polyfill.

Per abilitare questa trasformazione, aggiungi @babel/plugin-proposal-record-and-tuple alla tua configurazione.

Nuove funzionalità Flow (#12193, #12234)​

Babel 7.13.0 supporta due nuove funzionalità Flow:

  • Annotazioni di tipo this nelle funzioni, che consentono di specificare il tipo dell'oggetto this come se fosse un parametro

    JavaScript
    function getPerson(this: Database, id: string): Person {
      this instanceof Database; // true
    }

  • Dichiarazioni enum con membri sconosciuti

    JavaScript
    enum PetKind {
      Dog,
      Cat,
      Snake,
      ...
    }

Supporto TypeScript 4.2 (#12628)​

TypeScript 4.2 introduce nuove funzionalità sintattiche come le signature astratte per i costruttori.

Maggiori dettagli sono disponibili nel post di rilascio TypeScript.

Supporto automatico per ES modules in @babel/runtime (#12632)​

@babel/runtime contiene tutti gli helper di runtime di Babel sia nel formato CommonJS che in quello dei moduli ECMAScript.

Fino ad ora, era necessario scegliere manualmente quale formato utilizzare specificando l'opzione useESModules di @babel/plugin-transform-runtime.

Abbiamo riorganizzato la struttura interna di @babel/runtime, sfruttando il nuovo campo "exports" di package.json supportato da Node.js e dai bundler, consentendo così la scelta automatica tra CJS ed ESM.

Per questo motivo, l'opzione useESModules è ora deprecata e verrà rimossa in Babel 8.