Προσπαθώ να χρησιμοποιήσω async, await από το μηδέν στο 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;
Η κανονική χρήση χωρίς το async/await λειτουργεί μια χαρά. Καμία ιδέα για το τι κάνω λάθος;
Το babel-polyfill
απαιτείται. Πρέπει επίσης να το εγκαταστήσετε για να λειτουργήσει το async/await.
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. Το πρόσθετο περιγράφεται ως εξής:
Externalize references to helpers and builtins, automatically polyfilling your code without polluting globals. Τι σημαίνει όμως αυτό στην πραγματικότητα; Βασικά, μπορείτε να χρησιμοποιήσετε built-ins όπως Promise, Set, Symbol κλπ καθώς και να χρησιμοποιήσετε όλα τα χαρακτηριστικά της Babel που απαιτούν polyfill απρόσκοπτα, χωρίς global ρύπανση, καθιστώντας το εξαιρετικά κατάλληλο για βιβλιοθήκες.
Περιλαμβάνει επίσης υποστήριξη για async/await μαζί με άλλα built-ins του 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 config σας:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Όταν χρησιμοποιούσατε το webpack-dev-server με το HMR, κάνοντας αυτό μείωσε αρκετά τον αριθμό των αρχείων που πρέπει να μεταγλωττίσει σε κάθε build. Αυτό το module εγκαθίσταται ως μέρος του babel-polyfill
οπότε αν το έχετε ήδη, είστε εντάξει, διαφορετικά μπορείτε να το εγκαταστήσετε ξεχωριστά με το npm i -D babel-regenerator-runtime
.