7.13.0 Publicado: Registros y Tuplas, suposiciones de compilación granular y targets de nivel superior

1 de enero de 2021 · 8 min de lectura

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 →

¡Acabamos de publicar Babel 7.13.0, la primera versión menor de 2021!

Esta versión incluye características importantes en @babel/core: una opción targets (similar a la de @babel/preset-env) que puede compartirse entre diferentes plugins, una opción assumptions para ajustar con precisión tu configuración y producir una salida de compilación más pequeña, y soporte para plugins y presets escritos usando módulos ECMAScript nativos.

Babel ahora soporta transformar la propuesta de ECMAScript Records and Tuples, que introduce estructuras de datos inmutables e igualdad estructural en JavaScript, y analizar sintácticamente la propuesta Module Blocks.

Además, añadimos soporte para algunas nuevas características de Flow y TypeScript.

Puedes leer el changelog completo en GitHub.

Actualización sobre Financiamiento

Nos hemos unido al programa "GitHub Sponsors for organizations", así que ahora puedes patrocinarnos directamente a través de GitHub 😊.

Estos fondos se utilizan para apoyar los esfuerzos continuos de nuestro equipo (actualmente un mantenedor a tiempo completo y tres a tiempo parcial) para mejorar la estabilidad y desarrollar nuevas características.

Tanto nuestras donaciones como gastos se rastrean abiertamente en nuestra página de Open Collective, donde también registraremos las donaciones provenientes de GitHub Sponsors.

Agradecemos donaciones tanto de individuos como de empresas. Si tu empresa está interesada en convertirse en patrocinador Gold tier ($1k/mes) y quiere discutir más detalles, ¡contáctanos en team@babeljs.io!

Destacados

Opción `targets` de nivel superior (#12189, RFC)

La opción targets de @babel/preset-env permite especificar entornos objetivo, eligiendo automáticamente qué sintaxis transformar y qué polyfills inyectar. Tras el lanzamiento de @babel/preset-env, descubrimos que los plugins en sí mismos también pueden beneficiarse de conocer tus targets. Actualmente esto resulta engorroso, ya que debes especificar tus targets dos veces (por ejemplo, usando nuestros nuevos plugins de polyfill). Al introducir targets como opción de nivel superior, ahora solo necesitas especificarlos una vez:

Old configuration New configuration

Old configuration	New configuration
babel.config.json `{ "presets": [ ["@babel/preset-env", { "targets": ">1%, not ie 11" }] ], "plugins": [ ["polyfill-es-shims", { "targets": ">1%, not ie 11" }] ] }`	JSON `{ "targets": ">1%, not ie 11", "presets": ["@babel/preset-env"], "plugins": ["polyfill-es-shims"] }`

babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
        "targets": ">1%, not ie 11"
    }]
  ],
  "plugins": [
    ["polyfill-es-shims", {
      "targets": ">1%, not ie 11"
    }]
  ]
}

JSON
{
  "targets": ">1%, not ie 11",
  "presets": ["@babel/preset-env"],
  "plugins": ["polyfill-es-shims"]
}

Recomendamos migrar tu configuración de Babel a esta nueva opción targets de nivel superior, ya que ofrece estos beneficios adicionales:

Maneja mejor el target esmodules: true (se intersecta con otros targets en lugar de reemplazarlos)
Al introducir más soporte relacionado con targets en nuestros plugins, ¡obtendrás automáticamente una salida más optimizada!

Puedes leer los detalles de esta nueva opción en su RFC.

🔮 En el futuro podríamos explorar mover @babel/preset-env a @babel/core para evitar instalar paquetes adicionales al comenzar con Babel. ¡Esta nueva opción es el primer paso en esa dirección!

Opción `assumptions` de nivel superior (#12219, RFC)

Muchos de nuestros plugins tienen una opción loose, que le indica a Babel que genere un código de salida más pequeño y rápido al hacer ciertas suposiciones sobre tu código e ignorar ciertos casos límite en la especificación de JavaScript.

Sin embargo, loose tiene algunos problemas que causan confusión en los usuarios: el término en sí no ayuda a describir exactamente cómo afecta al comportamiento del compilador y, lo que es peor, a veces requiere configurar múltiples plugins para asegurar que todo se compile correctamente.

Para ayudar a solucionar estos problemas, hemos añadido una nueva opción de alto nivel para indicarle a Babel qué suposiciones puede hacer sobre tu código: ¡assumptions! Similar a la nueva opción targets, cada plugin recibirá ahora las suposiciones que hayas activado, eliminando la necesidad de configurar la opción individualmente. Esto es muy valioso ya que un plugin puede verse influenciado por múltiples suposiciones, y una suposición puede influenciar múltiples plugins.

precaución

Esto es funcionalidad avanzada. Al igual que la opción anterior loose, ten cuidado al activar suposiciones, porque no son compatibles con la especificación y pueden romper tu código de formas inesperadas.

Por ejemplo, al transformar clases, Babel generará esta salida por defecto:

Input Output

Input	Output
JavaScript `class Test { constructor() { this.x = 2; } } // You can test the thrown error in the console: // Uncaught TypeError: class constructors must be invoked with 'new' Test();`	JavaScript `function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } let Test = function Test() { _classCallCheck(this, Test); this.x = 2; }; // You can test the thrown error in the console: // Uncaught TypeError: class constructors must be invoked with 'new' Test();`

JavaScript
class Test {
  constructor() {
    this.x = 2;
  }
}

// You can test the thrown error in the console:
// Uncaught TypeError: class constructors must be invoked with 'new'
Test();

JavaScript
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

let Test = function Test() {
  _classCallCheck(this, Test);

  this.x = 2;
};

// You can test the thrown error in the console:
// Uncaught TypeError: class constructors must be invoked with 'new'
Test();

Sin embargo, habilitar el supuesto noClassCalls le dice a Babel: "Nunca intento llamar a clases sin new, por lo que puedes compilar sin preocuparte por ello":

JSON
{
  "targets": "firefox 30",
  "assumptions": { "noClassCalls": true },
  "presets": ["@babel/preset-env"]
}

Input Output

Input	Output
JavaScript `class Test { constructor() { this.x = 2; } } // Won't throw since we violated the assumption Test();`	JavaScript `let Test = function Test() { this.x = 2; }; // Won't throw since we violated the assumption Test();`

JavaScript
class Test {
  constructor() {
    this.x = 2;
  }
}

// Won't throw since we violated the assumption
Test();

JavaScript
let Test = function Test() {
  this.x = 2;
};

// Won't throw since we violated the assumption
Test();

Consulta la lista completa de suposiciones en nuestra documentación, donde puedes habilitarlas o deshabilitarlas individualmente para ver cómo afectan la salida compilada.

Soporte para Records y Tuples (#12145)

Gracias a una colaboración con Bloomberg, Babel ahora soporta transformar la propuesta de etapa 2 "Records and Tuples".

El plugin de Babel transforma la sintaxis de records y tuples usando las funciones globales Record y Tuple:

Input	Output
JavaScript `let data = #{ name: "Babel", ids: #[1, 2, 3] };`	JavaScript `let data = Record({ name: "Babel", ids: Tuple(1, 2, 3), });`

Esto significa que necesitarás cargar un polyfill para esas funciones globales, como @bloomberg/record-tuple-polyfill, ya sea importándolo en tu código o con una etiqueta <script>:

<script src="https://unpkg.com/@bloomberg/record-tuple-polyfill@0.0.3/lib/index.umd.js" />

NOTA: Ningún motor soporta actualmente records y tuples, así que siempre necesitas cargar el polyfill.

Para activar esta transformación, necesitas añadir @babel/plugin-proposal-record-and-tuple a tu configuración.

Nuevas características de Flow (#12193, #12234)

Babel 7.13.0 tiene soporte para dos nuevas características de Flow:

Anotaciones de tipo this en funciones, que te permiten especificar el tipo del objeto this como si fuera un parámetro
JavaScript
```
function getPerson(this: Database, id: string): Person {
  this instanceof Database; // true
}
```
Declaraciones enum con miembros desconocidos
JavaScript
```
enum PetKind {
  Dog,
  Cat,
  Snake,
  ...
}
```

Soporte para TypeScript 4.2 (#12628)

TypeScript 4.2 soporta algunas nuevas características de sintaxis como las firmas de constructores abstractos.

Puedes leer más sobre los cambios en la publicación de lanzamiento de TypeScript.

Módulos ES automáticos en `@babel/runtime` (#12632)

@babel/runtime contiene todos los helpers de tiempo de ejecución de Babel en ambos formatos: CommonJS y módulos ECMAScript (ESM).

Hasta ahora, debías elegir manualmente cuál querías utilizar, especificando la opción useESModules de @babel/plugin-transform-runtime.

Ahora hemos reorganizado la estructura interna de @babel/runtime, aprovechando el nuevo campo "exports" en package.json compatible con Node.js y bundlers, permitiendo que estos elijan automáticamente entre CJS y ESM.

Por este motivo, la opción useESModules ahora está obsoleta y será eliminada en Babel 8.

Actualización sobre Financiamiento​

Destacados​

Opción targets de nivel superior (#12189, RFC)​

Opción assumptions de nivel superior (#12219, RFC)​

Soporte para Records y Tuples (#12145)​

Nuevas características de Flow (#12193, #12234)​

Soporte para TypeScript 4.2 (#12628)​

Módulos ES automáticos en @babel/runtime (#12632)​