@ babel / preset-env ejemplo

@babel/preset-env es un ajuste preestablecido inteligente que le permite usar el último JavaScript sin necesidad de microgestionar qué transformaciones de sintaxis (y opcionalmente, polyfills del navegador) son necesarias para su (s) entorno (s) de destino. ¡Esto hace su vida más fácil y los paquetes de JavaScript más pequeños!

• Instalar en pc
• ¿Como funciona?
• Integración de listas de navegadores
• Opciones

Instalar en pc

Con npm:

npm install --save-dev @babel/preset-env

O hilo:

yarn add @babel/preset-env --dev

¿Como funciona?

@babel/preset-env no sería posible si no fuera por una serie de increíbles proyectos de código abierto, como browserslist, compat-table, y electron-to-chromium.

Aprovechamos estas fuentes de datos para mantener asignaciones de qué versión de nuestros entornos de destino admitidos obtuvieron soporte para una sintaxis de JavaScript o una función del navegador, así como un mapeo de esas sintaxis y funciones para los complementos de transformación de Babel y los polyfills core-js.

Es importante tener en cuenta que @babel/preset-env lo hace no apoyo stage-x complementos.

@babel/preset-env toma los entornos de destino que haya especificado y los compara con sus asignaciones para compilar una lista de complementos y se la pasa a Babel.

Integración de listas de navegadores

Para proyectos basados ​​en navegador o Electron, recomendamos utilizar un .browserslistrc archivo para especificar objetivos. Es posible que ya tenga este archivo de configuración, ya que lo utilizan muchas herramientas del ecosistema, como autoprefixer, stylelint, eslint-plugin-compat y muchos otros.

Por defecto @babel/preset-env utilizará Browserslist fuentes de configuracióna no ser que se establecen las opciones target o ignoreBrowserslistConfig.

Tenga en cuenta que si confía en la consulta de valores predeterminados de la lista de navegadores (ya sea explícitamente o sin tener una configuración de lista de navegadores), querrá consultar la sección Sin objetivos para obtener información sobre el comportamiento de preset-env.

Por ejemplo, para incluir solo polyfills y transformaciones de código necesarias para los usuarios cuyos navegadores tienen una participación de mercado> 0.25% (ignorando navegadores sin actualizaciones de seguridad como IE 10 y BlackBerry):

  "presets": [
    [
      "@babel/preset-env",
      
        "useBuiltIns": "entry"
      
    ]
  ]

lista de navegadores

> 0.25%
not dead

o

package.json

"browserslist": "> 0.25%, not dead"

Tenga en cuenta que desde v7.4.5 la consulta de la lista de navegadores se resuelve con mobileToDesktop: true. Por ejemplo, si desea crear una instantánea de una consulta, ejecute npx browserslist --mobile-to-desktop ">0.25%, not dead".

Opciones

Para obtener más información sobre las opciones de configuración de un preajuste, consulte la opciones preestablecidas documentación.

targets

string | Array | [string]: string , por defecto es .

Describe los entornos a los que da soporte / objetivo para su proyecto.

Esto puede ser un compatible con listas de navegadores consulta (con salvedades):

  "targets": "> 0.25%, not dead"

O un objeto de versiones de entorno mínimas para admitir:

  "targets": 
    "chrome": "58",
    "ie": "11"
  

Entornos de ejemplo: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.

Sin objetivos

Dado que uno de los objetivos originales de preset-env era ayudar a los usuarios a pasar fácilmente del uso preset-latest, se comporta de manera similar cuando no se especifican objetivos: preset-env transformará todo el código ES2015-ES2020 para que sea compatible con ES5.

No recomendamos usar preset-env de esta manera porque no aprovecha su capacidad para apuntar a entornos / versiones específicos.

  "presets": ["@babel/preset-env"]

Debido a esto, preset-envEl comportamiento de lista de navegadores: lo hace no utilizar el defaults consulta cuando no hay objetivos se encuentran en su Babel o configuración (s) de lista de navegadores. Si desea utilizar el defaults consulta, deberá pasarla explícitamente como destino:

  "presets": [["@babel/preset-env",  "targets": "defaults" ]]

Reconocemos que esto no es ideal y lo revisaremos en Babel v8.

targets.esmodules

boolean.

También puede apuntar a navegadores que admitan módulos ES (https://www.ecma-international.org/ecma-262/6.0/#sec-modules). Al especificar esta opción, se ignorará el campo de los navegadores. Puede utilizar este enfoque en combinación con para servir condicionalmente scripts más pequeños a los usuarios (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility).

tenga en cuenta: al especificar el destino de esmodules, se ignorarán los destinos de los navegadores.

  "presets": [
    [
      "@babel/preset-env",
      
        "targets": 
          "esmodules": true
        
      
    ]
  ]

targets.node

string | "current" | true.

Si desea compilar con la versión actual del nodo, puede especificar "node": true o "node": "current", que sería lo mismo que "node": process.versions.node.

targets.safari

string | "tp".

Si desea compilar contra el vista previa de la tecnología versión de Safari, puede especificar "safari": "tp".

targets.browsers

string | Array.

Una consulta para seleccionar navegadores (por ejemplo: últimas 2 versiones,> 5%, safari tp) usando lista de navegadores.

Tenga en cuenta que los resultados de los navegadores se anulan con elementos explícitos de targets.

Nota: esto se eliminará en una versión posterior a favor de simplemente establecer “objetivos” para una consulta directamente.

bugfixes

boolean, por defecto es false.

Agregado en: v7.9.0

Nota: estas optimizaciones estarán habilitadas de forma predeterminada en Babel 8

Por defecto, @babel/preset-env (y los complementos de Babel en general) agruparon las características de sintaxis de ECMAScript en colecciones de características más pequeñas estrechamente relacionadas. Estos grupos pueden ser grandes e incluir muchos casos extremos, por ejemplo, los “argumentos de función” incluyen parámetros desestructurados, predeterminados y de descanso. A partir de esta información de agrupación, Babel habilita o deshabilita cada grupo según el objetivo de compatibilidad del navegador que usted especifique. @babel/preset-env‘s targets opción.

Cuando esta opción está habilitada, @babel/preset-env intenta compilar la sintaxis rota al más cercano sintaxis moderna no rota compatible con los navegadores de destino. Depende de tu targets y en la cantidad de sintaxis moderna que esté utilizando, esto puede llevar a una reducción significativa del tamaño de la aplicación compilada. Esta opción fusiona las características de @babel/preset-modules sin tener que utilizar otro preset.

spec

boolean, por defecto es false.

Habilite más transformaciones que cumplan con las especificaciones, pero potencialmente más lentas, para cualquier complemento en este ajuste preestablecido que las admita.

loose

boolean, por defecto es false.

Habilitar transformaciones “sueltas” para cualquier complemento en este ajuste preestablecido que los permita.

modules

"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, por defecto es "auto".

Habilite la transformación de la sintaxis del módulo ES a otro tipo de módulo. Tenga en cuenta que cjs es solo un alias para commonjs.

Estableciendo esto en false preservará los módulos ES. Use esto solo si tiene la intención de enviar módulos ES nativos a los navegadores. Si está utilizando un paquete con Babel, el valor predeterminado modules: "auto" siempre se prefiere.

modules: "auto"

Por defecto @babel/preset-env usos caller datos para determinar si los módulos ES y las características del módulo (p. ej. import()) debería transformarse. Generalmente caller Los datos se especificarán en los complementos del paquete (p. ej. babel-loader, @rollup/plugin-babel) y, por tanto, no se recomienda pasar caller datos usted mismo – El pasado caller puede sobrescribir el de los complementos del paquete y, en el futuro, puede obtener resultados subóptimos si los paquetes admiten nuevas funciones del módulo.

debug

boolean, por defecto es false.

Salidas a console.log los complementos de polyfills y transform habilitados por preset-env y, si corresponde, cuál de sus objetivos lo necesitaba.

include

Array, por defecto es [].

Una variedad de complementos para incluir siempre.

Las opciones válidas incluyen cualquiera:

• Complementos de Babel – ambos con (@babel/plugin-transform-spread) y sin prefijo (plugin-transform-spread) son compatibles.

• Integrados (ambos para [email protected] y [email protected], tal como es.map, es.set, o es.object.assign.

Los nombres de los complementos se pueden especificar total o parcialmente (o usar RegExp).

Entradas aceptables:

• Nombre completo (string): "es.math.sign"
• Nombre parcial (string): "es.math.*" (resuelve todos los complementos con es.math prefijo)
• RegExp Objeto: /^transform-.*$/ o new RegExp("^transform-modules-.*")

Tenga en cuenta que lo anterior . es el RegExp equivalente a coincidir con cualquier carácter, y no con el real '.' personaje. También tenga en cuenta que para que coincida con cualquier carácter .* se utiliza en RegExp Opuesto a * en glob formato.

Esta opción es útil si hay un error en una implementación nativa, o una combinación de una función no compatible + una compatible no funciona.

Por ejemplo, Node 4 admite clases nativas pero no propagadas. Si super se utiliza con un argumento de propagación, entonces el @babel/plugin-transform-classes transformar necesita ser included, ya que no es posible transpilar una extensión con super de lo contrario.

Nota la include y exclude opciones solamente trabajar con el complementos incluidos con este ajuste preestablecido; así, por ejemplo, incluyendo @babel/plugin-proposal-do-expressions o excluyendo @babel/plugin-proposal-function-bind arrojará errores. Para usar un complemento no incluidos con este ajuste preestablecido, agréguelos directamente a sus “complementos”.

exclude

Array, por defecto es [].

Una serie de complementos para excluir / eliminar siempre.

Las opciones posibles son las mismas que las include opción.

Esta opción es útil para poner en “lista negra” una transformación como @babel/plugin-transform-regenerator si no usa generadores y no quiere incluir regeneratorRuntime (cuando usas useBuiltIns) o por usar otro complemento como asíncrono rápido en lugar del async-to-gen de Babel.

useBuiltIns

"usage" | "entry" | false, por defecto es false.

Esta opción configura cómo @babel/preset-env maneja polyfills.

Cuando el usage o entry se utilizan opciones, @babel/preset-env agregará referencias directas a core-js módulos como importaciones desnudas (o requiere). Esto significa core-js se resolverá en relación con el archivo en sí y debe ser accesible.

Ya que @babel/polyfill fue obsoleto en 7.4.0, recomendamos agregar directamente core-js y configurar la versión a través del corejs opción.

npm install [email protected] --save

# or

npm install [email protected] --save

useBuiltIns: 'entry'

NOTA: Utilice únicamente import "core-js"; y import "regenerator-runtime/runtime"; una vez en toda la aplicación. Si esta usando @babel/polyfill, ya incluye ambos core-js y regenerator-runtime: importarlo dos veces arrojará un error. Varias importaciones o necesidades de esos paquetes pueden causar colisiones globales y otros problemas que son difíciles de rastrear. Recomendamos crear un archivo de entrada única que solo contenga el import declaraciones.

Esta opción habilita un nuevo complemento que reemplaza al import "core-js/stable"; y import "regenerator-runtime/runtime" declaraciones (o require("core-js") y require("regenerator-runtime/runtime")) con necesidades individuales a diferentes core-js puntos de entrada basados ​​en el medio ambiente.

En

import"core-js";

Fuera (diferente según el entorno)

import"core-js/modules/es.string.pad-start";
import"core-js/modules/es.string.pad-end";

Importador "core-js" carga polyfills para todas las funciones posibles de ECMAScript: ¿qué pasa si sabe que solo necesita algunas de ellas? Cuando usas [email protected], @babel/preset-env es capaz de optimizar cada uno core-js punto de entrada y sus combinaciones. Por ejemplo, es posible que desee rellenar únicamente métodos de matriz y nuevos Math propuestas:

En

import"core-js/es/array";
import"core-js/proposals/math-extensions";

Fuera (diferente según el entorno)

import"core-js/modules/es.array.unscopables.flat";
import"core-js/modules/es.array.unscopables.flat-map";
import"core-js/modules/esnext.math.clamp";
import"core-js/modules/esnext.math.deg-per-rad";
import"core-js/modules/esnext.math.degrees";
import"core-js/modules/esnext.math.fscale";
import"core-js/modules/esnext.math.rad-per-deg";
import"core-js/modules/esnext.math.radians";
import"core-js/modules/esnext.math.scale";

Puedes leer core-jsde la documentación para obtener más información sobre los diferentes puntos de entrada.

NOTA: Al usar [email protected] (ya sea utilizando explícitamente el corejs: 2 opción o implícitamente), @babel/preset-env también transformará las importaciones y las necesidades de @babel/polyfill. Este comportamiento está desaprobado porque no es posible usar @babel/polyfill con diferente core-js versiones.

useBuiltIns: 'usage'

Agrega importaciones específicas para polyfills cuando se utilizan en cada archivo. Aprovechamos el hecho de que un empaquetador cargará el mismo polyfill solo una vez.

En

a.js

var a = newPromise();

b.js

var b = newMap();

Fuera (si el entorno no lo admite)

a.js

import"core-js/modules/es.promise";
var a = newPromise();

b.js

import"core-js/modules/es.map";
var b = newMap();

Fuera (si el entorno lo admite)

a.js

var a = newPromise();

b.js

var b = newMap();

useBuiltIns: false

No agregue polyfills automáticamente por archivo y no transforme import "core-js" o import "@babel/polyfill" a polyfills individuales.

corejs

Agregado en: v7.4.0

2, 3 o 3, proposals: boolean , por defecto es 2.

Esta opción solo tiene efecto cuando se usa junto con useBuiltIns: usage o useBuiltIns: entryy asegura @babel/preset-env inyecta las importaciones correctas para su core-js versión.

De forma predeterminada, solo se inyectan polyfills para características ECMAScript estables: si desea polyfill, tiene tres opciones diferentes:

• cuando usas useBuiltIns: "entry", puede importar directamente un propuesta de polyfill: import "core-js/proposals/string-replace-all".
• cuando usas useBuiltIns: "usage" tienes dos alternativas diferentes:
  • selecciona el shippedProposals opción a true. Esto permitirá polyfills y transformaciones para la propuesta que ya se han enviado a los navegadores durante un tiempo.
  • usar corejs: version: 3, proposals: true . Esto permitirá el polyfilling de cada propuesta respaldada por core-js.

forceAllTransforms

boolean, por defecto es false.

module.exports = function(api) 
  return 
    presets: [
      [
        "@babel/preset-env",
        
          targets: 
            chrome: 59,
            edge: 13,
            firefox: 50,
          ,
          // for uglifyjs...forceAllTransforms: api.env("production"),
        ,
      ],
    ],
  ;
;

NOTA: targets.uglify está en desuso y se eliminará en el próximo mayor a favor de esto.

De forma predeterminada, este ajuste preestablecido ejecutará todas las transformaciones necesarias para los entornos de destino. Habilite esta opción si desea forzar la ejecución todos transforma, que es útil si la salida se ejecutará a través de UglifyJS o un entorno que solo admita ES5.

NOTA: Uglify tiene una rama “Harmony” en progreso para solucionar la falta de compatibilidad con ES6, pero aún no es estable. Puedes seguir su progreso en Número 448 de UglifyJS2. Si necesita un minificador alternativo que lo hace admite la sintaxis ES6, recomendamos usar babel-minify.

configPath

string, por defecto es process.cwd()

El punto de partida donde comenzará la búsqueda de configuración para la lista de navegadores y ascenderá a la raíz del sistema hasta que se encuentre.

ignoreBrowserslistConfig

boolean, por defecto es false

Alterna si o no Browserslist fuentes de configuración se utilizan, lo que incluye buscar cualquier archivo de lista de navegadores o hacer referencia a la clave de lista de navegadores dentro de package.json. Esto es útil para proyectos que usan una configuración de lista de navegadores para archivos que no se compilarán con Babel.

browserslistEnv

Agregado en: v7.10.0string, por defecto es undefined

los Entorno de lista de navegadores usar.

shippedProposals

boolean, por defecto es false

Alterna la habilitación de la compatibilidad con propuestas integradas / de funciones que se han enviado en los navegadores. Si sus entornos de destino tienen soporte nativo para una propuesta de función, su complemento de sintaxis de analizador coincidente está habilitado en lugar de realizar cualquier transformación. Tenga en cuenta que esto no habilitar las mismas transformaciones que @babel/preset-stage-3, ya que las propuestas pueden seguir cambiando antes de llegar a los navegadores.

Actualmente se admiten los siguientes:

Incorporados inyectado al usar useBuiltIns: "usage"

• esnext.global-this (solo apoyado por [email protected])
• esnext.string.match-all (solo apoyado por [email protected])

Características

• propiedades de clase
• separador numérico
• métodos privados

Puede leer más sobre la configuración de opciones preestablecidas aquí

Advertencias

Consultas de lista de navegadores ineficaces

Tiempo op_mini all es una consulta de lista de navegadores válida, preset-env actualmente la ignora debido a falta de datos de apoyo para Opera Mini.