Acabo de empezar a usar Babel para compilar mi código javascript de ES6 en ES5. Cuando empiezo a usar Promises, parece que no funciona. El sitio web de Babel afirma que admite promesas a través de polyfills.
Sin suerte, traté de agregar:
require("babel/polyfill");o
import * as p from "babel/polyfill";Con eso, obtendré el siguiente error en el arranque de mi aplicación:
No se puede encontrar el módulo 'babel/polyfill'
Busqué el módulo pero parece que me falta algo fundamental aquí. También traté de agregar el antiguo y bueno bluebird NPM, pero parece que no funciona.
¿Cómo utilizar los polyfills de Babel?
Esto cambió un poco en babel v6.
De los documentos:
El polyfill emulará un entorno ES6 completo. Este polyfill se carga automáticamente cuando se usa babel-node.
Instalación:
$ npm install babel-polyfill
Uso en Node / Browserify / Webpack:
Para incluir el polyfill, debe solicitarlo en la parte superior del punto de entrada a su aplicación.
require("babel-polyfill");
Uso en el navegador:
Disponible en el archivo dist/polyfill.js dentro de una versión babel-polyfill npm. Esto debe incluirse antes de todo su código Babel compilado. Puede anteponerlo a su código compilado o incluirlo en un <script> antes.
NOTA: No require esto a través de browserify, etc., use babel-polyfill .
Los documentos de Babel describen esto de manera bastante concisa:
Babel incluye un polyfill que incluye un tiempo de ejecución regenerador personalizado y core.js.
Esto emulará un entorno ES6 completo. Este polyfill se carga automáticamente cuando se usa babel-node y babel/registrar.
Asegúrese de solicitarlo en el punto de entrada de su aplicación, antes de llamar a cualquier otra cosa. Si está utilizando una herramienta como webpack, eso se vuelve bastante simple (puede decirle a webpack que lo incluya en el paquete).
Si está utilizando una herramienta como gulp-babel o babel-loader , también debe instalar el paquete babel para usar el polyfill.
También tenga en cuenta que para los módulos que afectan el alcance global (polyfills y similares), puede usar una importación concisa para evitar tener variables sin usar en su módulo:
import 'babel/polyfill';Para la versión 7 de Babel, si está usando @babel/preset-env, para incluir polyfill todo lo que tiene que hacer es agregar un indicador 'useBuiltIns' con el valor de 'uso' en su configuración de babel. No es necesario solicitar o importar polyfill en el punto de entrada de su aplicación.
Con esta bandera especificada, babel@7 optimizará y solo incluirá los polyfills que necesite.
Para usar esta bandera, después de la instalación:
npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfillSimplemente agregue la bandera:
useBuiltIns: "usage"a su archivo de configuración de babel llamado "babel.config.js" (también nuevo en Babel@7), en la sección "@babel/env":
// file: babel.config.js module.exports = () => { const presets = [ [ "@babel/env", { targets: { /* your targeted browser */ }, useBuiltIns: "usage" // <-----------------*** add this } ] ]; return { presets }; };Referencia:
Actualización de agosto de 2019:
Con el lanzamiento de Babel 7.4.0 (19 de marzo de 2019), @babel/polyfill está obsoleto. En lugar de instalar @babe/polyfill, instalará core-js:
npm install --save core-js@3 Se agrega una nueva entrada corejs a su babel.config.js
// file: babel.config.js module.exports = () => { const presets = [ [ "@babel/env", { targets: { /* your targeted browser */ }, useBuiltIns: "usage", corejs: 3 // <----- specify version of corejs used } ] ]; return { presets }; };ver ejemplo: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Referencia: