Saltar al contenido principal

Lanzamiento 7.15.0: Pipelines estilo Hack, enums const de TypeScript y soporte para Rhino como destino

· 5 min de lectura
Babel Team
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta versión habilita por defecto el análisis de await de nivel superior (Etapa 4 en la reunión de mayo) y la transformación de verificaciones ergonómicas de marca para campos privados (Etapa 4 en la reunión de julio). También se añade soporte para el operador de pipeline estilo Hack. Además, mejoramos nuestro soporte para TypeScript implementando transformaciones para const enums y alias de espacios de nombres, y expandimos nuestras heurísticas para añadir .displayName a componentes React creados con React.createContext() (#13501).

También presentamos una nueva asunción del compilador, noIncompleteNsImportDetection, para generar una salida más reducida al compilar módulos ECMAScript a CommonJS sin preocuparnos por importaciones de espacios de nombres parcialmente inicializadas causadas por ciclos de módulos.

Adicionalmente, ahora puedes especificar Rhino como destino de compilación.

Puedes leer el changelog completo en GitHub.

Estamos profundamente agradecidos por el apoyo que la comunidad ha mostrado en los últimos meses, desde nuestra actualización sobre financiamiento en mayo. ¡Contáctanos en team@babeljs.io si deseas discutir patrocinios!

Destacados​

Características de ECMAScript habilitadas por defecto​

En las últimas dos reuniones, las propuestas de await de nivel superior y verificaciones ergonómicas de marca para campos privados alcanzaron la Etapa 4.

JavaScript
import * as db from "database";

await db.connect(); // top-level await

class DBConnector {
  #password;
  static isConnector(obj) {
    return #password in obj; // ergonomic brand checks
  }
}

Babel ahora las soporta por defecto, por lo que puedes eliminar los siguientes plugins de tu configuración:

  • @babel/plugin-syntax-top-level-await

  • @babel/plugin-syntax-private-property-in-object

  • @babel/plugin-proposal-private-property-in-object

Ten en cuenta que Babel actualmente solo puede analizar await de nivel superior pero no transformarlo.

Nuevas características de TypeScript (#13324, #13528)​

TypeScript 4.4 no incluye nueva sintaxis que tuviéramos que implementar, salvo una restricción menor: no puedes especificar el valor de un campo de clase abstracta.

abstract class C {
    abstract prop = 1; // now a SyntaxError!
}

Sin embargo, sí añadimos dos características de TypeScript que llevábamos tiempo esperando: const enums y alias de espacios de nombres (import Alias = Namespace).

Anteriormente mostrábamos un error al usar const enums porque requiere información de tipos para compilar correctamente. Como alternativa, la comunidad creó plugins como babel-plugin-const-enum. Babel ahora ignora el modificador const al compilar enums, lo cual coincide con el comportamiento de TypeScript al usar la opción --isolatedModules.

Si deseas una salida más optimizada similar al código predeterminado generado por TypeScript, puedes habilitar la opción optimizeConstEnums en @babel/plugin-tranform-typescript o @babel/preset-typescript.

// Input
const enum Animals { Dog }
console.log(Animals.Dog);

// Output (default)
var Animals;
(function (Animals) {
  Animals[Animals["Dog"] = 0] = "Dog";
})(Animals || (Animals = {}));

console.log(Animals.Dog);

// Output with `optimizeConstEnums`
console.log(0);

Compatibilidad con el operador de tubería (pipeline) estilo Hack (#13191, #13416)​

"Hack-style pipelines" es una nueva variante de la propuesta del operador de tubería (pipeline), destinada a reemplazar la variante "smart mix".

Los Hack-style pipelines requieren que siempre uses un "topic token" (como #) para referenciar el valor del paso anterior de la tubería:

JavaScript
// Input
"World"
  |> `Hello, ${#}!`
  |> alert(#);

// output
var _ref, _ref2;

_ref2 = (_ref = "World", `Hello, ${_ref}!`), alert(_ref2);

Puedes probar esta propuesta habilitando la opción proposal: "hack" en @babel/plugin-proposal-pipeline-operator. También debes elegir qué "topic token" usar, entre "#" y "%":

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-pipeline-operator", {
      "proposal": "hack",
      "topicToken": "#"
    }]
  ]
}

Preparando @babel/eslint-parser para Babel 8 (#13398)​

En los últimos meses hemos seguido trabajando lentamente en Babel 8. Aún no estamos listos para una versión beta de Babel 8, pero estamos empezando a exponer los primeros cambios experimentales.

Planeamos convertir completamente Babel de CommonJS a módulos ECMAScript, pero esto tiene un problema: la carga de configuración será asíncrona con más frecuencia, y @babel/eslint-parser solo puede funcionar de manera síncrona (porque ESLint solo admite analizadores síncronos).

@babel/eslint-parser 7.15.0 expone un nuevo punto de entrada: @babel/eslint-parser/experimental-worker. Este mueve la tarea de carga y análisis de configuración de Babel a un worker separado que se gestiona de manera síncrona desde el hilo principal, mientras sigue admitiendo la carga asíncrona de configuración. Como ventaja inmediata para Babel 7, permite usar módulos ECMAScript nativos para archivos de configuración de Babel incluso cuando se usa @babel/eslint-parser.

Puedes ayudarnos probándolo ahora en tus proyectos existentes y reportando cualquier error en nuestra página de issues:

JavaScript
// .eslintrc.js
module.exports = {
  parser: "@babel/eslint-parser/experimental-worker"
};
información

Este punto de entrada requiere Node.js >= 12.3.0