6.16.0 Rilasciato
Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →
Happy Birthday Babel 🎂 !
Happy 2nd birthday @babeljs
— Sebastian McKenzie (@sebmck) September 28, 2016
.;:````::;````;,```` ````;,````::,````:,::,:`````:,,:````:.,,```` ````:.,,```` ````:..,.```` ````,,..:,,..:````` ```.,.`,::.`.,`````:..,````` ```.,..::..,.```` ````:..,.```.,...:.:...,.```.:...,.::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.``..+''''+,..,'''++;,.``.,: `:,.``..+''''',..,''''+',.``.,: +,..``..+++''+,..,+''++;,.``..:, ,:+,...++++++,..,+++++.,..,+,` ,,.'',..,`;+++',..,+++'.`,..,+.,: `,,.`++,..,``...`,..,...,..,+..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```..,:,..,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```.,,..,,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,,.``+'''';```````,: ,.``````'+''''+.,``````,...,``````,.'+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,.....,,,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+'+''''+ `````````.:';:..`````.: ,.....```````````+'''''',+'''''',```````````....: ,.`````````````````````+'''''+'+'''''+'.,, ,.`````````````````````+'''''+'````````+'''''+'.,. :.+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'., ,,..:';,.``` ````.:';,.., .,.````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,...........................,: :,.............````````````````````````````````............,:,:,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,::,::,,........``````..``............,,,:;` :::,,,........`.............,,,:::. ,:::,,,,..............,,,,,::::.::::::,,,,,,,::::::,`
È difficile credere siano già passati 2 anni! Un enorme grazie a Sebastian per aver creato questo progetto straordinario!
Abbiamo fatto grandi progressi:
-
Oltre 200 contributori
-
Circa 113 release dalla 6.0.0 per un totale di 512 versioni
-
~4.5 milioni di download di
babel-corenell'ultimo mese -
Oltre 1400 risultati per
babel-pluginsu npm -
Oltre 700 risultati per
babel-presetsu npm -
Oltre 4500 utenti sul nostro Slack
Grazie infinite per l'utilizzo e i contributi alla nostra comunità!
Se non l'avete ancora visto, siamo tornati su Github Issues! Tutto merito di @danez
Come molti progetti open source, Babel è mantenuto da poche persone nel tempo libero. Lavoreremo per semplificare i contributi in vari modi (non solo al codice principale).
Quanto affermato da Evan Czaplicki in Code is the Easy Part è molto rilevante per qualsiasi progetto. Contribuire significa anche parlare, utilizzare e scrivere del progetto.
In quest'ottica, dovremmo creare una Pagina Risorse curata e aggiornata, e magari una newsletter per condividere progetti fantastici realizzati con Babel (nuovi plugin, strumenti o semplici idee).
Speriamo di collaborare maggiormente con TC-39, come già avviene per i proposal attuali e i nostri preset/plugin stage-x. Dovremmo eseguire test262 con Babel.
Abbiamo anche rilasciato Babili, il nostro minifier e iniziato a lavorare su babel-preset-env, l'"autoprefixer" per Babel.
Il futuro di Babel è radioso!
👓 Conformità alle specifiche
#3473 via #4576 Implementa il supporto per funzioni generatore asincrone e istruzioni for-await. (@zenparsing)
Questa modifica implementa la proposta di iterazione asincrona, attualmente allo stage 2 (e prevista per lo stage 3 nell'attuale meeting TC-39). Include:
- Trasforma funzioni generatore asincrone (
async function* g() { }) in funzioni generatore incapsulate, simile all'attuale trasformazione async-to-generator
async function* agf() {
await 1;
yield 2;
}
- Trasforma istruzioni
for-awaitin cicli for contenenti espressioni yield
async function f() {
for await (let x of y) {
g(x);
}
}
Esempio d'uso
async function* genAnswers() {
var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
var total = 0;
for await (let val of stream) {
total += await val;
yield total;
}
}
function forEach(ai, fn) {
return ai.next().then(function (r) {
if (!r.done) {
fn(r);
return forEach(ai, fn);
}
});
}
var output = 0;
return forEach(genAnswers(), function(val) { output += val.value })
.then(function () {
assert.equal(output, 42);
});
#4500 Supporto per proprietà di classe calcolate. (@motiz88)
Il supporto del parser è stato aggiunto in babylon@6.11.0 con babel/babylon#121
// Example
class Foo {
[x]
['y']
}
class Bar {
[p]
[m] () {}
}
#3702 Flow: genera annotazioni di tipo oggetto esatto. (@bhosmer)
Il supporto del parser è stato aggiunto in babylon@6.10.0 con babel/babylon#104
// Example
var a : {| x: number, y: string |} = { x: 0, y: 'foo' };
🚀 Nuova Funzionalità
#3561 babel-core: aggiunge opzioni per un parser o generatore diverso. (@hzoo)
Babel ora accetta anche le opzioni: parserOpts e generatorOpts (come oggetti).
parserOpts passerà tutte le proprietà al parser predefinito babylon. È possibile passare anche un'opzione parser per sostituirlo con un parser diverso.
Ciò permetterà di passare qualsiasi opzioni di babylon's:
{
"parserOpts": {
"allowImportExportEverywhere": true,
"allowReturnOutsideFunction": true,
"sourceType": "module",
"plugins": ["flow"]
}
}
È possibile passare anche parserOpts.parser e generatorOpts.generator. Ciò abiliterà l'uso di recast con Babel.
Recast è utilizzato in jscodeshift, uno strumento per creare codemod. Potreste conoscerli perché anche il team di React li pubblica per aiutare nella conversione tra le versioni di React.
{
"parserOpts": {
"parser": "recast"
},
"generatorOpts": {
"generator": "recast"
}
}
Babel come compilatore ha 3 fasi: parsing, trasformazione e generazione.
A livello generale, il processo è:
-
parsing: prende una stringa (codice di input) e la trasforma in JSON
-
trasformazione (plugin): prende JSON e crea una struttura JSON diversa
-
generazione del codice: trasforma il JSON di nuovo in una stringa (codice di output)
L'ultima fase di Babel è il generatore di codice. Tradizionalmente, il generatore di codice non ha bisogno di preoccuparsi del formato del codice (spazi, virgolette, ecc.). Questo perché il codice di output è il tuo codice "compilato" e probabilmente finirà nella directory dist, che verrà successivamente minificata, ecc.
Ma cosa succede se vuoi scrivere un plugin Babel che viene eseguito sul codice sorgente e restituisce il risultato nel sorgente (babel src -d src invece di babel src -d lib)? Vorresti che il diff risultante fosse leggibile e che il plugin modificasse solo ciò che è necessario, rispettando la tua guida di stile.
Questo perché desideri scrivere un plugin che trasformi il sorgente stesso. Un caso d'uso è un progetto chiamato lebab che è in pratica l'opposto di Babel (in precedenza chiamato 5to6). Attualmente, non è un plugin Babel e quindi volevamo aiutare a supportare questo caso d'uso.
Una volta che benjamn/recast#299 e benjamn/ast-types#162 saranno uniti, dovresti essere in grado di creare i tuoi codemod anche con Babel!
#4542 Aggiunta del supporto per le scorciatoie di organizzazione dei preset. (@nkt)
{
presets: ["@org/babel-preset-name"], // actual package
presets: ["@org/name"] // shorthand name
}
#4491 Aggiunta dell'opzione useBuiltIns per lo spread/rest sugli oggetti. (@hzoo)
useBuiltIns - Non utilizza gli helper di Babel e si limita a trasformare per usare il metodo integrato (disattivata di default).
{
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
// source
z = { x, ...y };
// compiled
z = Object.assign({ x }, y);
#4561 babel-code-frame: aggiunta opzioni per linesBefore, linesAfter. (@hzoo)
babel-code-frame è un pacchetto standalone che utilizziamo in Babel per segnalare gli errori.
Ora è disponibile un'opzione per specificare il numero di righe sopra e sotto l'errore.
1 | class Foo {
> 2 | constructor()
| ^
3 | }
#3695 via #4566 Consentire ai preset di utilizzare export default ES6 (@johanssj)
In precedenza creavamo i preset con export commonjs.
module.exports = {
plugins: [
require("babel-plugin-syntax-trailing-function-commas")
]
};
Ora è possibile utilizzare anche export default.
import syntaxTrailingCommas from "...";
export default {
plugins: [
syntaxTrailingCommas
]
};
💅 Rifiniture
#4572, #4579 Miglioramento dei colori per l'evidenziazione della sintassi. (@lydell)
Prima
Dopo
🐛 Correzioni di bug degne di nota
#3686 Correzione di typeof Symbol.prototype. (@brainlock)
// `typeof Symbol.prototype` should be 'object'
typeof Symbol.prototype === 'object'
#4507 Imposta le opzioni in babel-cli solo se diverse dai valori predefiniti. (@danez)
Risolto un problema relativo alle impostazioni predefinite non sovrascritte. Ciò causava il malfunzionamento di opzioni come comments: false.
#4524 Correzione dell'export di default con funzioni freccia e denominazione di funzioni. (@danharper)
// this wasn't exporting correctly before
export default ({ onClick }) => {
return <div onClick={() => onClick()}></div>;
}
#4518 Correzione delle classi esportate di default prive di nome. (@danez)
export default class {};
// wasn't correctly transforming to
exports["default"] = class {}
// with the es3-transforms
#4521 Correzione della rimozione dei typeParameters dalle funzioni freccia. (@danez)
// <X> wasn't stripped out
const find = <X> (f: (x:X) => X, xs: Array<X>): ?X => (
xs.reduce(((b, x) => b ? b : f(x) ? x : null), null)
)
#4552 Correzione della valutazione del destructuring con espressioni di chiamata. (@danez)
Abbiamo notato che non possiamo applicare queste ottimizzazioni se sono presenti chiamate di funzione o espressioni di membro sul lato destro dell'assegnazione, poiché la chiamata di funzione o l'espressione di membro (che potrebbe essere un getter con effetti collaterali) potrebbe potenzialmente alterare le variabili a cui stiamo assegnando.
[x, y] = [a(), obj.x];
// was transforming to
x = a();
y = obj.x;
// now transforms to
var _ref = [a(), obj.x];
x = _ref[0];
y = _ref[1];
#4587 Prevenire la rimozione completa di ClassProperty da parte di flow-strip-types/flow-comments. (@danharper)
Consulta GitHub per il resto del changelog!