Saltar al contenido principal

7.24.0 Publicado: Actualizaciones de decoradores e importación de módulos JSON

· 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 →

¡Babel 7.24.0 ya está disponible!

Actualizamos nuestra implementación de Decoradores para que coincida con la última versión de la propuesta, y mejoramos cómo transformamos campos y métodos privados de clases. También añadimos soporte para importar módulos JSON en navegadores y Node.js, una propuesta de Etapa 3 que depende de Atributos de Importación.

Puedes consultar el registro de cambios completo en GitHub.

Si tú o tu empresa quieren apoyar a Babel y la evolución de JavaScript, pero no están seguros de cómo, pueden donarnos en nuestro Open Collective y, aún mejor, trabajar directamente con nosotros en la implementación de nuevas propuestas de ECMAScript! Como proyecto impulsado por voluntarios, dependemos del apoyo de la comunidad para financiar nuestros esfuerzos en dar soporte a la amplia variedad de usuarios de JavaScript. ¡Contáctanos en team@babeljs.io si quieres conversar más!

Destacados​

Actualizaciones de decoradores (#16242)​

Las propuestas de decoradores en Etapa 3 han recibido numerosas actualizaciones menores en los últimos años, y desafortunadamente todas las implementaciones en diversas herramientas manejan versiones ligeramente diferentes.

Actualizamos nuestra implementación para que coincida con la versión más reciente de la propuesta. Esta versión también ha sido implementada en TypeScript y actualmente se está integrando de forma nativa en navegadores. La principal diferencia respecto a la versión 2023-05 implementada previamente radica en el orden de ejecución de los inicializadores registrados mediante el método context.addInitializer.

Puedes habilitar esta versión de la propuesta configurando la opción "version": "2023-11" en @babel/plugin-proposal-decorators:

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "version": "2023-11"
    }]
  ]
}

También puedes probar la nueva propuesta de decoradores en el REPL online de Babel.

Importación de módulos JSON (#15829, #15870)​

Babel 7.24.0 finalmente añade soporte para la propuesta de módulos JSON, que ha estado en Etapa 3 desde 2021. Esta propuesta permite importar directamente archivos JSON mediante declaraciones import junto con un atributo de importación type: "json":

import myConfig from "./config.json" with { type: "json" };

Babel transformará estas importaciones a la forma adecuada de cargar archivos JSON en tu(s) plataforma(s) objetivo, según tu opción targets:

  • Navegadores modernos

    const myConfig = await fetch(import.meta.resolve("./config.json"))
                            .then(r => r.json());

  • Navegadores antiguos sin soporte para import.meta

  • Node.js (ESM)

  • Node.js (CommonJS)

    const myConfig = JSON.parse(
      require("fs").readFileSync(require.resolve("./config.json"))
    );

  • Varias combinaciones de las anteriores

Puedes habilitarlo usando el plugin @babel/plugin-proposal-json-modules:

babel.config.json
{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-json-modules"]
}

Un analizador de Flow basado en Hermes (#16284)​

Babel implementó soporte para analizar y transformar anotaciones de tipo de Flow hace mucho tiempo, pero en el último año no hemos hecho un muy buen trabajo manteniéndonos al día con las nuevas características del lenguaje Flow.

Mientras tanto, el equipo de Hermes ha estado trabajando en un plugin de Babel, babel-plugin-syntax-hermes-parser, que te permite usar directamente Hermes, el nuevo motor JavaScript de React Native, para analizar código Flow. Soporta todas las últimas características de Flow, como conversiones de tipo as y tipos condicionales.

Ahora puedes habilitar este analizador más fácilmente usando la opción experimental_useHermesParser de @babel/preset-flow:

babel.config.json
{
  "presets": [
    ["@babel/preset-flow", {
      "experimental_useHermesParser": true
    }]
  ]
}

Estamos explorando la posibilidad de eliminar el soporte para Flow de @babel/parser en una futura versión, en favor de este analizador basado en Hermes. Por favor, pruébalo, reporta cualquier error de análisis en el seguidor de errores de Hermes y cuéntanos sobre tu experiencia!

advertencia

El analizador Hermes aún no soporta transformaciones basadas en comentarios dentro del archivo