Я намагаюся використовувати async, очікувати з нуля на Babel 6, але я отримую regeneratorRuntime не визначено.
Файл .babelrc
{
"presets": [ "es2015", "stage-0" ]
}
файл package.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
файл .js
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
Використання його в звичайному режимі без асинхронізації/очікування працює просто чудово. Є ідеї, що я роблю не так?
Потрібен babel-polyfill
. Ви також повинні встановити його для того, щоб запрацювала функція асинхронізації/очікування.
npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader
package.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.babelrc
{
"presets": [ "es2015", "stage-0" ]
}
.js з async/await (приклад коду)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
У файлі запуску
require("babel-core/register");
require("babel-polyfill");
Якщо ви використовуєте webpack, вам потрібно помістити його як перше значення масиву entry
у вашому файлі конфігурації webpack (зазвичай webpack.config.js
), відповідно до коментаря @Cemen:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Якщо ви хочете запускати тести за допомогою babel, використовуйте його:
mocha --compilers js:babel-core/register --require babel-polyfill
Крім polyfill я використовую babel-plugin-transform-runtime. Плагін описується як:
Екстерналізувати посилання на хелпери та білдіни, автоматично поліфілюючи ваш код, не забруднюючи глобали. Але що це означає насправді? По суті, ви можете використовувати вбудовані функції, такі як Promise, Set, Symbol і т.д., а також використовувати всі функції Babel, які вимагають полізаповнення безперешкодно, без глобального забруднення, що робить його надзвичайно придатним для бібліотек.
Він також включає підтримку асинхронізації/очікування разом з іншими вбудованими функціями ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
У .babelrc
додайте плагін часу виконання
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Примітка Якщо ви використовуєте babel 7, пакет було перейменовано на @babel/plugin-transform-runtime.
Крім того, якщо вам не потрібні всі модулі, які надає babel-polyfill
, ви можете просто вказати babel-regenerator-runtime
в конфігурації вашого webpack:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
При використанні webpack-dev-server з HMR це значно зменшує кількість файлів, які потрібно компілювати при кожній збірці. Цей модуль встановлюється як частина babel-polyfill
, тому якщо у вас вже є цей модуль, то все гаразд, інакше ви можете встановити його окремо за допомогою npm i -D babel-regenerator-runtime
.