7.5.0 rilasciato: import dinamico e pipeline F#

Traduzione Beta Non Ufficiale

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

Oggi rilasciamo Babel 7.5.0!

Questa versione include un supporto migliorato per alcune proposte ECMAScript: la variante F# dell'operatore pipeline (Stage 1) e un plugin ufficiale per la proposta import() dinamica (Stage 4), con supporto in preset-env. Include anche il supporto sperimentale per i namespace di TypeScript e per la query default di Browserslist in preset-env.

Potete consultare l'intero changelog su GitHub.

Un ringraziamento speciale a Wesley Wolfe, Martin Zlámal, Blaine Bublitz, Letladi Sebesho, Paul Comanici, Lidor Avitan, Artem Butusov, Sebastian Johansson e Min ho Kim per le loro prime PR!

Cerchiamo sempre collaboratori, specialmente per la gestione delle issue, la revisione delle pull request e l'assistenza su Slack. Stiamo sperimentando il nuovo ruolo di triage implementato da GitHub, e vogliamo riconoscere il contributo di chi nella community ci darà una mano! 😉

Un esempio fantastico sono le nuove aggiunte all'organizzazione Babel: Tan Li Hau, che ha dato un grande contributo nella gestione delle issue e nella correzione di bug, e Thiago Arrais, che ha aiutato nell'implementazione dell'operatore pipeline!

In altre novità, abbiamo appena annunciato l'avvio del nostro podcast! Se ve lo siete persi, date un'occhiata al post di ieri!

Il nostro lavoro è reso possibile anche dai nostri sponsor. Ringraziamo Discord e clay per essere diventati Silver Sponsor su OpenCollective, e Linkedin per il supporto a Henry su GitHub!

Un ringraziamento speciale a Handshake, protocollo di naming decentralizzato e permissionless compatibile con DNS, per la donazione di $100.000 dello scorso anno! Nell'ambito del loro FOSS Community Grant, hanno stanziato $10.2 milioni per varie community open source come Apache, Debian, EFF e Babel.

Se voi o la vostra azienda volete supportare Babel e l'evoluzione di JavaScript ma non sapete come, potete sponsorizzarci su Open Collective o, meglio ancora, collaborare direttamente all'implementazione delle nuove proposte ECMAScript! Essendo un progetto basato sul volontariato, dipendiamo dal supporto della community sia per finanziare gli sforzi di supporto agli utenti JavaScript che per la gestione del codice. Contattate Henry all'indirizzo henry@babeljs.io per saperne di più!

Operatore pipeline F# (#9450 e #9984)

attenzione

La proposta dell'operatore pipeline è ancora allo Stage 1 e pertanto la sua specifica è ancora in fase di definizione.

Questa proposta presenta diverse varianti in fase di valutazione. Testando questo plugin, puoi aiutare gli autori della proposta a raccogliere feedback sul funzionamento delle pipeline. Tieni presente che potrebbero essere necessarie modifiche se la semantica cambierà durante il processo di proposta (e cambierà).

Dalla versione 7.3.0, Babel supporta la variante Smart dell'operatore pipeline, mentre la variante "minimal" è disponibile dalla 7.0.0-beta.

Grazie allo sforzo congiunto di Thiago Arrais e James DiGioia, puoi ora testare anche la variante F#! Se hai commenti su questa specifica variante, puoi contattare James.

In cosa differisce la variante F# dalla Smart? Invece del concetto di "riferimenti al topic" (#), utilizza le arrow function. Questo approccio è più simile al JavaScript attuale, sebbene risulti leggermente meno conciso.

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let newScore = boundScore( 0, 100, add(7, double(person.score)) );	JavaScript let newScore = person.score |> double |> n => add(7, n) |> n => boundScore(0, 100, n);	JavaScript let newScore = person.score |> double |> add(7, #) |> boundScore(0, 100, #);

Sebbene le due proposte non siano dipendenti l'una dall'altra, puoi combinare le pipeline F# con l'applicazione parziale (supportata da Babel 7.4.0):

JavaScript

let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

Nota che, sebbene possa sembrare simile alla variante "Smart", la proposta di applicazione parziale supporta ? solo nei parametri delle chiamate di funzione. Ad esempio, person |> #.score è una pipeline "Smart" valida, mentre l'equivalente F# richiede un'arrow function: person |> p => p.score.

L'operatore pipeline F# gestisce inoltre diversamente l'await:

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let id = ( await ( await fetch(url) ).json() ).ID;	JavaScript let newScore = fetch(url) |> await |> r => r.json() |> await |> obj => obj.ID;	JavaScript let newScore = fetch(url) |> await # |> #.json() |> await # |> #.ID;

Per testare questa nuova variante, aggiungi @babel/plugin-proposal-pipeline-operator alla tua configurazione Babel:

JavaScript

module.exports = {
  plugins: [
    ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }]
  ]
};

Puoi anche provarla nella REPL abilitando il preset "Stage 1".

Dynamic import (#9552 e #10109)

Sebbene Babel supporti da tempo il parsing degli import dinamici import(source), non esisteva un modo coerente per trasformarli.

• Con webpack o rollup, si includeva solo @babel/plugin-syntax-dynamic-import senza trasformarlo con Babel

• Con Node, si poteva usare il plugin babel-plugin-dynamic-import-node

• Con SystemJS, @babel/plugin-transform-modules-systemjs in combinazione con @babel/plugin-syntax-dynamic-import trasformava l'import() senza abilitare esplicitamente un plugin di trasformazione.

Poiché la proposta è stata recentemente integrata nello standard, abbiamo unificato questi casi d'uso in un unico plugin: @babel/plugin-proposal-dynamic-import. Questo plugin va usato con un trasformatore di moduli, poiché Babel deve conoscere il sistema di caricamento target. Per CommonJS, delega internamente a babel-plugin-dynamic-import-node.

Ecco una configurazione valida:

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import",
    "@babel/plugin-transform-modules-amd"
  ]
};

Questa invece non è valida:

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import"
  ]
};

Se desideri abilitare esclusivamente il parsing delle espressioni import() senza trasformarle, puoi semplicemente includere il pacchetto @babel/plugin-syntax-dynamic-import.

Se stai utilizzando @babel/preset-env, il supporto per l'import dinamico è abilitato di default. Non preoccuparti della compatibilità con webpack o rollup, poiché sia babel-loader che rollup-plugin-babel disabilitano automaticamente la trasformazione di Babel per consentire al bundler di gestirla correttamente.

Query defaults di Browserslist in @babel/preset-env (#8897)

Quando a @babel/preset-env non vengono passati target specifici, applica tutte le trasformazioni sintattiche al tuo codice (emulando il comportamento di babel-preset-latest, ora deprecato).

Per supportare questo comportamento, abbiamo dovuto aggirare il fatto che Browserslist stesso ha scelte predefinite. Ciò impediva a @babel/preset-env di utilizzare la query default.

@babel/preset-env supporta ora la query defaults quando si passano i target direttamente al preset:

JavaScript

module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: { browsers: "defaults" }
    }]
  ]
};

Puoi anche configurarla utilizzando un file .browserslistrc, usato anche da altri strumenti come Autoprefixer o Stylelint.

Il comportamento predefinito di @babel/preset-env rimane quello di compilare tutto, ma in Babel 8 potremmo cambiarlo per utilizzare questa query defaults.

Supporto sperimentale per i namespaces di TypeScript (#9785)

Fino ad ora, i namespace erano la seconda funzionalità più importante di TypeScript non supportata da Babel (la prima è il type-checking! 😛). Grazie al lavoro del membro della community Wesley Wolfe, puoi ora abilitare il supporto sperimentale nel plugin TypeScript usando l'opzione allowNamespaces di @babel/plugin-transform-typescript:

JavaScript

module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

Potrai così utilizzare i namespace nel tuo codice:

JavaScript

namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

⚠️ Attenzione ⚠️

Quando il supporto a TypeScript fu inizialmente aggiunto a Babel, i namespaces non furono inclusi poiché richiedono informazioni sui tipi disponibili solo in un compilatore TypeScript completo con type-checker. Per questo motivo, l'attuale supporto (sperimentale) presenta alcune limitazioni:

• I namespace possono esportare esclusivamente binding immutabili
• Unendo più namespace con lo stesso nome, il loro scope non è condiviso

La lista completa delle avvertenze è disponibile nella documentazione di @babel/plugin-transform-typescript.