7.5.0 publicada: import dinámico y tuberías F#

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 →

¡Hoy lanzamos Babel 7.5.0!

Esta versión incluye mejoras en el soporte para varias propuestas de ECMAScript: la variante F# del operador de tubería (Stage 1) y un plugin oficial para la propuesta de import() dinámico (Stage 4), además de soporte en preset-env. También añade soporte experimental para namespace de TypeScript y para la consulta default de Browserslist en preset-env.

Puedes consultar el registro completo de cambios en GitHub.

¡Agradecimientos especiales a Wesley Wolfe, Martin Zlámal, Blaine Bublitz, Letladi Sebesho, Paul Comanici, Lidor Avitan, Artem Butusov, Sebastian Johansson y Min ho Kim por sus primeras contribuciones (PRs)!

Siempre estamos buscando ayuda, especialmente con la clasificación de issues, revisión de pull requests y apoyo en Slack. Estamos probando el nuevo rol de triage implementado por GitHub, y queremos reconocer a los miembros de la comunidad que nos apoyen activamente. 😉

Un ejemplo fantástico son las nuevas incorporaciones a la organización de Babel: Tan Li Hau, quien ha ayudado enormemente en la clasificación de issues y corrección de errores, y Thiago Arrais, ¡quien colaboró en la implementación del operador de tubería!

En otras noticias, ¡acabamos de anunciar el inicio de nuestro propio podcast! Si te lo perdiste, consulta nuestra publicación de ayer.

Nuestro trabajo ha sido posible gracias a nuestros patrocinadores. Agradecemos a Discord y clay por convertirse en Patrocinadores Plata en OpenCollective, así como a Linkedin por patrocinar a Henry en GitHub.

Un agradecimiento especial a Handshake, protocolo de nombres descentralizado y sin permisos compatible con DNS, por donar $100,000 el año pasado. Como parte de su FOSS Community Grant, destinaron $10.2M a comunidades open source como Apache, Debian, EFF y Babel.

Si tú o tu empresa quieren apoyar a Babel y la evolución de JavaScript, pueden patrocinarnos en Open Collective o colaborar directamente en la implementación de nuevas propuestas de ECMAScript. Al ser un proyecto impulsado por voluntarios, dependemos del apoyo comunitario para financiar nuestros esfuerzos. ¡Contacta a Henry en henry@babeljs.io para más información!

Operador de tubería F# (#9450 y #9984)

precaución

La propuesta del operador de tubería sigue en Stage 1, por lo que su especificación aún está en definición.

Esta propuesta tiene varias variantes en evaluación. Al probar este plugin, puedes ayudar a los autores a recopilar feedback sobre cómo podrían funcionar las tuberías. Ten en cuenta que podrían requerirse refactorizaciones si la semántica cambia durante el proceso de la propuesta (y lo hará).

Desde la versión 7.3.0, Babel soporta la variante Smart del operador de tubería, y la variante "mínima" desde 7.0.0-beta.

Gracias al trabajo conjunto de Thiago Arrais y James DiGioia, ahora también puedes probar la variante F#. Si tienes comentarios sobre esta variante, puedes contactar a James.

¿En qué se diferencia la variante F# de la Smart? En lugar de usar "referencias de tema" (#), utiliza funciones de flecha. Esto ofrece la ventaja de ser más similar al JavaScript actual, aunque con una sintaxis ligeramente menos concisa.

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let newScore = boundScore( 0, 100, add(7, double(person.score)) );	JavaScript let newScore = person.score |> double |> n => add(7, n) |> n => boundScore(0, 100, n);	JavaScript let newScore = person.score |> double |> add(7, #) |> boundScore(0, 100, #);

Aunque las dos propuestas son independientes, puedes usar tuberías F# junto con aplicación parcial (soportada desde Babel 7.4.0):

JavaScript

let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

Nota: aunque pueda parecer similar a la variante "Smart", la propuesta de aplicación parcial solo soporta ? en parámetros de llamadas a funciones. Por ejemplo, person |> #.score es una tubería "Smart" válida, mientras que su equivalente F# requiere una función de flecha: person |> p => p.score.

El operador de tubería F# también maneja await de forma diferente:

Current JavaScript	F# pipeline	Smart pipeline
JavaScript let id = ( await ( await fetch(url) ).json() ).ID;	JavaScript let newScore = fetch(url) |> await |> r => r.json() |> await |> obj => obj.ID;	JavaScript let newScore = fetch(url) |> await # |> #.json() |> await # |> #.ID;

Si quieres probar esta nueva variante, añade @babel/plugin-proposal-pipeline-operator a tu configuración de Babel:

JavaScript

module.exports = {
  plugins: [
    ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }]
  ]
};

También puedes probarlo en el REPL activando el preset "Stage 1".

Import dinámico (#9552 y #10109)

Aunque Babel ha soportado el análisis de imports dinámicos import(source) desde hace tiempo, no existía una forma consistente de transformarlos.

• Si usabas webpack o rollup, solo incluías @babel/plugin-syntax-dynamic-import sin transformarlo con Babel

• Si usabas Node, podías emplear el plugin babel-plugin-dynamic-import-node

• Si usabas SystemJS, @babel/plugin-transform-modules-systemjs junto con @babel/plugin-syntax-dynamic-import lo transformaban sin necesidad de habilitar explícitamente un plugin de transformación para import()

Dado que la propuesta de import dinámico ya forma parte de la especificación principal, hemos unificado estos casos de uso en un único punto de entrada: @babel/plugin-proposal-dynamic-import. Este plugin debe usarse junto con un transformador de módulos, ya que Babel necesita saber qué sistema de carga de módulos estás usando. Para CommonJS, delega internamente en babel-plugin-dynamic-import-node.

Por ejemplo, esta configuración es válida:

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import",
    "@babel/plugin-transform-modules-amd"
  ]
};

Mientras que esta no:

JavaScript

module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import"
  ]
};

Si solo quieres permitir el análisis de expresiones import() sin transformarlas, puedes incluir únicamente el paquete @babel/plugin-syntax-dynamic-import.

Si estás usando @babel/preset-env, el soporte para importación dinámica se habilita por defecto. No necesitas preocuparte por la compatibilidad con webpack o rollup, ya que tanto babel-loader como rollup-plugin-babel desactivan automáticamente la transformación de Babel para permitir que el empaquetador la maneje correctamente.

Consulta defaults de Browserslist en @babel/preset-env (#8897)

Cuando a @babel/preset-env no se le especifican objetivos (targets), aplica todas las transformaciones de sintaxis a tu código (emulando el comportamiento del ahora obsoleto babel-preset-latest).

Para soportar este comportamiento, tuvimos que resolver el hecho de que Browserslist tiene elecciones predeterminadas. Esto causaba que @babel/preset-env no permitiera el uso de la consulta default.

@babel/preset-env ahora soporta la consulta defaults cuando se pasan objetivos directamente al preset:

JavaScript

module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: { browsers: "defaults" }
    }]
  ]
};

También puedes configurarlo usando un archivo .browserslistrc, que también utilizan otras herramientas como Autoprefixer o Stylelint.

El comportamiento predeterminado de @babel/preset-env sigue siendo compilar todo, pero podríamos cambiarlo en Babel 8 para usar esta consulta defaults.

Soporte experimental para namespaces de TypeScript (#9785)

Hasta ahora, los namespaces eran la segunda característica más importante de TypeScript no soportada por Babel (¡la primera es la verificación de tipos! 😛). Gracias al trabajo del miembro de la comunidad Wesley Wolfe, ahora puedes habilitar soporte experimental para ellos en el plugin de TypeScript, usando la opción allowNamespaces de @babel/plugin-transform-typescript:

JavaScript

module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

Luego, puedes usar espacios de nombres en tu código:

JavaScript

namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

⚠️ Advertencia ⚠️

Cuando se añadió inicialmente soporte para TypeScript en Babel, los namespaces no se incluyeron porque requieren información de tipos que solo un compilador completo de TypeScript y verificador de tipos puede proporcionar. Por esta razón, el soporte actual (experimental) tiene algunas limitaciones:

• Los namespaces solo pueden exportar enlaces inmutables
• Al fusionar múltiples namespaces con el mismo nombre, su ámbito no se comparte

Puedes encontrar la lista completa de advertencias en la documentación de @babel/plugin-transform-typescript.