web-dev-qa-db-fra.com

ReferenceError: régénérateurRuntime n'est pas défini (mais fonctionne à l'intérieur d'une étendue)

Je suis tombé sur cette étrange occurrence de:

ReferenceError: regeneratorRuntime is not defined

... que j'ai réussi à reproduire dans un cadre très minimal (par rapport à des questions similaires SO sur le même problème), et j'ai également remarqué un comportement étrange selon que les portées sont utilisées.

Le code suivant fonctionne:

'use strict';

require('babel-polyfill');

{  // scope A (if you remove it you observe different behavior when .babelrc is present)

    function *simplestIterator() {
        yield 42;
    }

    for (let v of simplestIterator()) {
        console.log(v);
    }

}

Les packages sont:

$ npm ls --depth 0
[email protected] /home/mperdikeas/regeneratorRuntimeNotDefined
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Contenu de .babelrc sont:

$ cat .babelrc 
{
    "presets": ["es2016"]
}

Cependant, lorsque la portée est supprimée et que le simplestIterator est placé sur la portée globale, il échoue avec:

ReferenceError: regeneratorRuntime is not defined

Plus étrange encore, si le .babelrc le fichier est supprimé/renommé le code réussit que la portée soit présente ou non. Que ce soit un oscilloscope ou un IIFE qui encapsule le générateur ne fait aucune différence.

Dépôt github minimal démontrant ce comportement ici .

Pour observer le comportement:

git clone https://github.com/mperdikeas/regeneratorRuntimeNotDefined.git
cd regeneratorRuntimeNotDefined/
npm install
npm run build && npm run start

Ce qui précède affichera 42 sur la console. Maintenant, supprimez la portée et voyez ce qui se passe. Renommez ensuite .babelrc pour le voir fonctionner à nouveau (avec ou sans portée).

Mes questions sont:

  • pourquoi le es2016 Le préréglage Babel déclenche cette erreur
  • pourquoi le fait de mettre le générateur dans une lunette résout le problème?

mise à jour

Sur la base de la réponse acceptée, et comme il s'agissait du code d'un module que j'écrivais, j'ai fini par faire:

require('babel-polyfill');
module.exports = require('./app.js');
javascriptgeneratorbabeljs
21
Marcus Junius Brutus

Babel suppose que le polyfill sera chargé avant toute autre chose dans votre application, mais vous utilisez une déclaration de fonction, qui est hissée, ce qui signifie qu'elle existe et est utilisable avantrequire has été appelé.

Dans le cas des générateurs, alors besoin de regeneratorRuntime qui est fourni par le polyfill, mais le polyfill n'a pas été chargé lorsque le régénérateur est initialisé.

La recommandation de l'équipe Babel est de réaliser deux fichiers:

index.js

require('babel-polyfill');
require('./app');
47
loganfsmyth

Vous pouvez également faire ce qui suit avec es2015 preset et transform-régénérateur plugin:

.babelrc

{
  "presets": ["es2015"],
  'plugins': [
    'transform-regenerator'
  ]
}

Code

let regeneratorRuntime =  require("regenerator-runtime");
// You code with ES6 generators

P.S. Bien sûr, vous devez installer babel-plugin-transform-régénérateur paquet npm.

10
Mark Lavrynenko