Vai al contenuto principale

Versione 6.23.0 rilasciata

· Lettura di 8 min
Henry Zhu
Traduzione Beta Non Ufficiale

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

In questa release: numerosi miglioramenti al plugin react-constant-elements di @STRML, alcune ottimizzazioni nella generazione del codice e tante correzioni di bug! Un grazie a @loganfsmyth per la release + le revisioni!

Un ringraziamento speciale a @xtina-starr, @finkef, @chitchu, @yongxu, @jwbay, @hex13 per il loro primo PR! 🎉

Consulta GitHub per il changelog completo.

Presto pubblicherò un post sulla versione 7.0 (con i nostri progressi attuali), quindi tenetevi pronti! Vogliamo fare tutto il possibile per semplificare l'aggiornamento sia per gli utenti finali che per gli autori di plugin e strumenti: che si tratti di un periodo beta per la release, di una guida all'aggiornamento alla 7.0, di codemod se necessario, di un bot per aggiornare automaticamente il tuo progetto open source dalla 6 alla 7, o di qualsiasi altro suggerimento ci possiate dare!

Poiché non tutti se ne rendono conto, volevo ribadire che il nostro team è ancora un piccolo gruppo di volontari. Non ci sono sponsor aziendali né persone che ci lavorano a tempo pieno.

Ci piacerebbe che contribuiate (soprattutto non solo con codice!), quindi contattateci! Sarebbe fantastico avere più designer, redattori tecnici/docenti per il nostro sito.

E in altre notizie, Babel è stato accettato come progetto per Rails Girls Summer of Code ed è in attesa di conferma come organizzazione mentore per Google Summer of Code!

🚀 Nuova Funzionalità​

#5236 transform-es2015-block-scoping: Aggiunta opzione throwIfClosureRequired per generare errori sul codice lento. (@spicyj)​

babel.config.json
{
  "plugins": [
    ["transform-es2015-block-scoping", {
      "throwIfClosureRequired": true
    }]
  ]
}

In casi come il seguente, è impossibile riscrivere let/const senza aggiungere una funzione aggiuntiva e una chiusura durante la trasformazione:

JavaScript
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1);
}

In codice estremamente sensibile alle prestazioni, ciò può essere indesiderato. Se "throwIfClosureRequired": true è impostato, Babel genera un errore durante la trasformazione di questi pattern invece di aggiungere automaticamente una funzione aggiuntiva.

#4812 transform-react-constant-elements: Supporto per espressioni pure (@STRML)​

Aggiunge un controllo path.isPure() al plugin.

L'espressione rimarrà nel codice sollevato, anche se potrebbe essere valutata staticamente. UglifyJS/Babili se ne occuperà in molti casi.

Input

JavaScript
const OFFSET = 3;

var Foo = React.createClass({
  render: function () {
    return (
      <div tabIndex={OFFSET + 1} />
    );
  }
});

Output

JavaScript
const OFFSET = 3;

var _ref = <div tabIndex={OFFSET + 1} />;

var Foo = React.createClass({
  render: function () {
    return _ref;
  }
});

Deopt

Come notato in facebook/react#3226, non è sicuro riutilizzare elementi con proprietà mutabili.

JavaScript
<div style={
  { width: 100 }
} />

#5288 babel-preset-flow: Aggiunto nuovo preset (@thejameskyle)​

babel-preset-flow include semplicemente transform-flow-strip-types.

Prima (ancora valido)

babel.config.json
{
  "plugins": ["transform-flow-strip-types"]
}

Dopo

babel.config.json
{
  "presets": ["flow"]
}

FYI: il preset React include ancora il plugin flow di default (potremmo cambiarlo quando verrà aggiunto il supporto a TS)

Un ringraziamento speciale a @simnalamburt per averci fornito il nome del pacchetto!

#5230 babel-traverse: Aggiunti metodi aggiuntivi per elementi fratelli (@chitchu)​

Per gli autori di plugin: esiste già path.getSibling(number), quindi stiamo aggiungendo alcuni metodi helper.

JavaScript
path.getPrevSibling(); // path.getSibling(path.parentPath.key - 1)
path.getNextSibling(); // path.getSibling(path.parentPath.key + 1)
path.getAllPrevSiblings(); // returns Array<NodePath> of previous siblings
path.getAllNextSiblings();// returns Array<NodePath> of next siblings

🐛 Correzioni di bug​

Poiché quasi ogni correzione di bug rappresenta un'opportunità per approfondire la conoscenza di JavaScript e del funzionamento dello strumento che utilizzate, vi consiglio di esaminare alcune delle PR!

#5298 Risolto comportamento in modalità loose di transform-es2015-for-of con label. (@jridgewell)​

JavaScript
b: for (let c of d()) { // previously, the label was completely dropped
  for (let e of f()) {
    continue b;
  }
}

#5153 transform-react-constant-elements: Ottimizzazioni nell'hoisting (@STRML)​

Migliore gestione dell'hoisting all'interno delle dichiarazioni di variabile

Input

JavaScript
function render() {
  const bar = "bar", renderFoo = () => <foo bar={bar} baz={baz} />, baz = "baz";

  return renderFoo();
}

Output

JavaScript
function render() {
  const bar = "bar",
        renderFoo = () => _ref2,
        baz = "baz",
        _ref2 = <foo bar={bar} baz={baz} />;

  return renderFoo();
}

Hoisting con Higher Order Components

Input

JavaScript
const HOC = component => component;

const Parent = () => (
  <div className="parent">
    <Child/>
  </div>
);

export default Parent;

let Child = () => (
  <div className="child">
    ChildTextContent
  </div>
);
Child = HOC(Child);

Output

JavaScript
const HOC = component => component;

const Parent = () => _ref;

export default Parent;

var _ref2 = <div className="child">
    ChildTextContent
  </div>;

let Child = () => _ref2;
Child = HOC(Child);

var _ref = <div className="parent">
    <Child />
  </div>;

#5143 transform-react-constant-elements: Correzione dell'hoisting da parte di PathHoister delle espressioni membro JSX su this (@STRML)​

<this.component /> veniva precedentemente sollevato al di fuori della propria funzione (non ha senso perché altrimenti this sarebbe undefined)

JavaScript
function render() {
  this.component = "div";
  return () => <this.component />;
}
JavaScript
function render() {
  this.component = "div";

  var _ref = <this.component />;

  return () => _ref;
}

#5030 transform-do-expressions: Evitati return multipli nei loop durante la sostituzione di espressioni. (@existentialism)​

JavaScript
let p
let a = do {
  while (p = p.parentPath) {
    if (a) {
      'a'
    } else {
      'b'
    }
  }
};
JavaScript
let p;
let a = function () {
  var _ret;

  while (p = p.parentPath) {
    if (a) {
      _ret = 'a';
    } else {
      _ret = 'b';
    }
  }
  return _ret; // previously had an extra return
}();

#5260 babel-register: Risolto TypeError nella gestione della cache. (@xtuc)​

#5206 babel-traverse: Disattivata valutazione di undefined con binding locale (@boopathi)​

Se undefined, NaN, Infinity vengono ridefiniti, disattiva la valutazione.

#5195 babel-plugin-transform-runtime: Esclusa compilazione di specifiche proprietà Symbol. (@taion)​

Non importare i singoli polyfill Symbol.asyncIterator/Symbol.observable, bensì utilizzare il polyfill completo di Symbol.

#5258 babel: Verifica installazione globale e visualizza messaggio CLI appropriato. (@xtina-starr)​

Ora installando babel il messaggio di errore indicherà se manca l'opzione -g.

#5270 babel-generator: Aggiunte parentesi per await di espressioni ternarie. (@erikdesjardins)​

JavaScript
async function asdf() {
  await (1 ? 2 : 3);
}

#5193 babel-generator: Aggiunte parentesi mancanti quando FunctionExpression è tag in template string. (@existentialism)​

JavaScript
(() => {})``;
(function(){}``);

#5235 transform-es2015-modules-commonjs: Limitata dimensione stack nell'assegnazione default di export node #4323. (@mattste)​

Un interessante caso limite quando si importano/esportano molti elementi!

JavaScript
import { foo, foo1, foo2 ... } from "foo"; // assume ... is 100 imports/exports
export { foo, foo1, foo2 ... }

Parte del codice generato appare così:

JavaScript
exports.Foo6 = exports.Foo5 = ...

Pertanto, con un file che esporta molti moduli, vengono creati così tanti nodi di assegnazione annidati nell'AST che il generatore di codice restituisce l'errore Maximum call stack size exceeded.

La soluzione è suddividere l'espressione in gruppi da 100.

Output

JavaScript
exports.foo100 = undefined; // split by 100
exports.foo99 = exports.foo98 = ... exports.foo1 = exports.foo = undefined

#5255 babel-generator: Usare trim invece di lodash/trimEnd per prestazioni nella generazione del codice (@jwbay)​

lodash/trimEnd esegue una regex su stringhe potenzialmente enormi che può bloccare Node. (106ms vs. 5ms)

#5050 babel-traverse: Riscrivere Hub come interfaccia (@yongxu)​

Questa modifica è stata annullata a causa di un cambiamento incompatibile con babel-core

In alcuni casi babel-traverse non può essere utilizzato autonomamente, quindi questa modifica rimuove codice che legava babel-traverse all'implementazione di babel-core.

🌏 Collaboratori: 20​

Consulta GitHub per l'intero changelog!