我正在尝试在Babel 6上从头开始使用async/await,但我得到的是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版本7.0.0-beta.55起,已删除舞台预设
参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
异步等待仍然可以由
https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage
安装
npm install --save-dev @babel/plugin-transform-async-to-generator
babelrc中的用法
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-async-to-generator"]
}
并使用babel polyfillhttps://babeljs.io/docs/en/babel-polyfill
安装
npm install --save @babel/polyfill
webpack.config.js
module.exports = {
entry: ["@babel/polyfill", "./app/js"],
};
我正在使用React和Django项目,并通过使用再生器运行时使其工作。你应该这样做,因为@babel/polyfill会增加你的应用程序的大小,而且也被弃用。我还遵循本教程的第1集和第2集创建了我的项目结构。
*包.json*
...
"devDependencies": {
"regenerator-runtime": "^0.13.3",
...
}
巴氏合金
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties"]
}
索引js
...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...
如果你正在构建一个应用程序,你只需要@babel/preset-env和@babel/polyfill:
npm i -D @babel/preset-env
npm i @babel/polyfill
(注意:您不需要安装core js和再生器运行时包,因为它们都将由@babel/polyfill安装)
然后在.babelrc中:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry" // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
}
]
]
}
现在设置目标环境。在这里,我们在.browserlistrc文件中执行此操作:
# Browsers that we support
>0.2%
not dead
not ie <= 11
not op_mini all
最后,如果使用useBuiltIns:“entry”,请将import@babel/polyfill放在条目文件的顶部。否则,你就完蛋了。
使用此方法将有选择地导入那些polyfills和“再生器运行时”文件(此处未定义修复再生器的运行时问题),前提是任何目标环境/浏览器都需要它们。