Lanzamiento de la versión 6.16.0
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Happy Birthday Babel 🎂 !
Happy 2nd birthday @babeljs
— Sebastian McKenzie (@sebmck) September 28, 2016
.;:````::;````;,```` ````;,````::,````:,::,:`````:,,:````:.,,```` ````:.,,```` ````:..,.```` ````,,..:,,..:````` ```.,.`,::.`.,`````:..,````` ```.,..::..,.```` ````:..,.```.,...:.:...,.```.:...,.::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.``..+''''+,..,'''++;,.``.,: `:,.``..+''''',..,''''+',.``.,: +,..``..+++''+,..,+''++;,.``..:, ,:+,...++++++,..,+++++.,..,+,` ,,.'',..,`;+++',..,+++'.`,..,+.,: `,,.`++,..,``...`,..,...,..,+..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```..,:,..,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```.,,..,,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,,.``+'''';```````,: ,.``````'+''''+.,``````,...,``````,.'+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,.....,,,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+'+''''+ `````````.:';:..`````.: ,.....```````````+'''''',+'''''',```````````....: ,.`````````````````````+'''''+'+'''''+'.,, ,.`````````````````````+'''''+'````````+'''''+'.,. :.+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'., ,,..:';,.``` ````.:';,.., .,.````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,...........................,: :,.............````````````````````````````````............,:,:,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,::,::,,........``````..``............,,,:;` :::,,,........`.............,,,:::. ,:::,,,,..............,,,,,::::.::::::,,,,,,,::::::,`
¡Es difícil creer que ya hayan pasado 2 años! Muchísimas gracias a Sebastian por crear este increíble proyecto.
Hemos crecido mucho:
-
Más de 200 colaboradores
-
Aproximadamente 113 lanzamientos desde la versión 6.0.0 y 512 lanzamientos en total.
-
Alrededor de 4.5 millones de descargas de
babel-coreel mes pasado -
Más de 1400 resultados para
babel-pluginen npm -
Más de 700 resultados para
babel-preseten npm -
Más de 4500 usuarios en nuestro Slack
¡Muchas gracias por usar y contribuir a nuestra comunidad!
Si no lo has visto recientemente, ¡hemos vuelto a GitHub Issues! Todo esto gracias a @danez.
Como la mayoría de proyectos open source, Babel es mantenido por pocas personas trabajando en su tiempo libre. Trabajaremos en facilitar las contribuciones de diversas formas (no solo al código principal).
Lo que Evan Czaplicki dice en El código es la parte fácil es muy relevante para cualquier proyecto, grande o pequeño. Gran parte de contribuir consiste simplemente en hablar, usar y escribir sobre el proyecto.
En ese sentido, deberíamos crear una página de recursos actualizada y curada, y quizás un boletín para hablar sobre las cosas geniales que la gente crea con Babel (un nuevo plugin, una nueva herramienta o simplemente una idea).
Esperamos poder colaborar más con TC-39, como lo hacemos con los stage-x presets y plugins. Deberíamos intentar ejecutar test262 con Babel.
También hemos lanzado Babili, nuestro minificador y comenzado el trabajo en babel-preset-env, el "autoprefixer" para Babel.
¡El futuro de Babel es brillante!
👓 Cumplimiento de especificaciones
#3473 via #4576 Implementa soporte para funciones generadoras asíncronas y sentencias for-await. (@zenparsing)
Este cambio implementa la propuesta de iteración asíncrona, actualmente en etapa 2 (y planeada para avanzar a etapa 3 en la reunión actual de TC-39). Incluye las siguientes características:
- Transforma funciones generadoras asíncronas (
async function* g() { }) en funciones generadoras envueltas, similar a la transformación actual de async-to-generator.
async function* agf() {
await 1;
yield 2;
}
- Transforma sentencias
for-awaiten bucles for que contienen expresiones yield.
async function f() {
for await (let x of y) {
g(x);
}
}
Ejemplo de 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 Soporte para propiedades computadas en clases. (@motiz88)
El soporte del parser se agregó en babylon@6.11.0 con babel/babylon#121
// Example
class Foo {
[x]
['y']
}
class Bar {
[p]
[m] () {}
}
#3702 Flow: generar anotaciones de tipo de objeto exactas. (@bhosmer)
El soporte del parser se agregó en babylon@6.10.0 con babel/babylon#104
// Example
var a : {| x: number, y: string |} = { x: 0, y: 'foo' };
🚀 Nueva característica
#3561 babel-core: agregar opciones para un parser o generador diferente. (@hzoo)
Babel ahora también aceptará las opciones: parserOpts y generatorOpts (como objetos).
parserOpts pasará todas las propiedades al parser predeterminado babylon. También puedes pasar una opción parser para sustituir por un parser diferente.
Esto permitirá pasar cualquiera de las opciones de babylon's:
{
"parserOpts": {
"allowImportExportEverywhere": true,
"allowReturnOutsideFunction": true,
"sourceType": "module",
"plugins": ["flow"]
}
}
También puedes pasar parserOpts.parser y generatorOpts.generator. Esto permitirá usar recast con Babel.
Recast se usa en jscodeshift, una herramienta para crear codemods. Quizás las conozcas porque el equipo de React también publica codemods para ayudar en las migraciones entre versiones.
{
"parserOpts": {
"parser": "recast"
},
"generatorOpts": {
"generator": "recast"
}
}
Babel como compilador tiene 3 pasos: parsing, transformación y generación.
A alto nivel, el proceso es:
-
parsing: tomar un string (código fuente) y convertirlo en JSON
-
transformación (plugins): tomar JSON y crear una estructura JSON diferente
-
generación de código: convertir el JSON nuevamente en un string (código de salida)
El último paso de Babel es el generador de código. Tradicionalmente, este generador no necesita preocuparse por el formato del código (espacios, comillas, etc). Esto se debe a que el código de salida es tu código "compilado" y probablemente irá al directorio dist, que eventualmente se minificará.
Pero ¿qué pasa si quieres escribir un plugin de Babel que se ejecute en tu código fuente y salida a fuente (babel src -d src en lugar de babel src -d lib)? Querrías que tu diff fuera legible y que el plugin solo modificara lo necesario, ajustándose a tu guía de estilo.
Esto se debe a que quieres escribir un plugin que transforme el propio código fuente. Un caso de uso es el proyecto lebab que es básicamente lo opuesto a Babel (antes se llamaba 5to6). Actualmente no es un plugin de Babel, así que queríamos ayudar a soportar ese caso de uso.
¡Una vez que se fusionen benjamn/recast#299 y benjamn/ast-types#162 podrás crear tus propios codemods con Babel también!
#4542 Se añade soporte para atajos de organización de presets. (@nkt)
{
presets: ["@org/babel-preset-name"], // actual package
presets: ["@org/name"] // shorthand name
}
#4491 Se añade opción useBuiltIns para el spread/rest de objetos. (@hzoo)
useBuiltIns - No utiliza los helpers de Babel y transforma directamente para usar el método nativo (desactivado por defecto).
{
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
// source
z = { x, ...y };
// compiled
z = Object.assign({ x }, y);
#4561 babel-code-frame: añade opciones para linesBefore, linesAfter. (@hzoo)
babel-code-frame es un paquete independiente que usamos en Babel para reportar errores.
Ahora existe una opción para especificar el número de líneas arriba y abajo del error
1 | class Foo {
> 2 | constructor()
| ^
3 | }
#3695 via #4566 Permite que los presets sean exportaciones por defecto ES6 (@johanssj)
Anteriormente creábamos presets con exportaciones CommonJS
module.exports = {
plugins: [
require("babel-plugin-syntax-trailing-function-commas")
]
};
Ahora también puedes usar export default
import syntaxTrailingCommas from "...";
export default {
plugins: [
syntaxTrailingCommas
]
};
💅 Mejoras
#4572, #4579 Mejora los colores del resaltado de sintaxis. (@lydell)
Antes
Después
🐛 Correcciones importantes
#3686 Corrige typeof Symbol.prototype. (@brainlock)
// `typeof Symbol.prototype` should be 'object'
typeof Symbol.prototype === 'object'
#4507 Solo establece opciones en babel-cli si difieren del valor predeterminado. (@danez)
Corrige un problema donde los valores predeterminados no se sobreescribían correctamente. Esto causaba que opciones como comments: false no funcionasen correctamente.
#4524 Corrige exportación por defecto con funciones flecha y nombrado de funciones. (@danharper)
// this wasn't exporting correctly before
export default ({ onClick }) => {
return <div onClick={() => onClick()}></div>;
}
#4518 Corrige clases exportadas por defecto sin nombre. (@danez)
export default class {};
// wasn't correctly transforming to
exports["default"] = class {}
// with the es3-transforms
#4521 Corrige eliminación de typeParameters en funciones flecha. (@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 Corrige evaluación de destructuring con expresiones de llamada. (@danez)
Notamos que no podemos hacer estas optimizaciones si hay llamadas a funciones o expresiones de miembro en el lado derecho de la asignación, ya que la llamada a función o la expresión de miembro (que podría ser un getter con efectos secundarios) podría alterar las variables que estamos asignando.
[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 Evita que flow-strip-types/flow-comments eliminen ClassProperty completo. (@danharper)
Consulta el resto del changelog en GitHub!