使用 babel js 将 async/await 编译为 es5
Posted
技术标签:
【中文标题】使用 babel js 将 async/await 编译为 es5【英文标题】:Compile asyn/await to es5 with babel js 【发布时间】:2017-05-30 11:54:39 【问题描述】:我有一个非常小的项目,只有一个 .html 文件和一个 .js 文件。我使用 asyn/await 函数的问题,所以我需要将其转换为 es5 以确保一切正常。
所以,我的 .html 文件如下所示:
<html>
<head>
</head>
<body>
...//page markup
<script src="dist/myCodeAsES5.js"></script>
<script>
var obj = new MyClass();
obj.calculate();
</script>
</body>
</html>
这里是我的 src.js
class MyClass
constructor()
this.calculate = async function ()
await func1();
async function func1()
for (var i = 0; i < 3; i++)
await func2(); // await in loop until func2() completed
async function func2()
for (var i = 0; i < 10; i++)
await func3(); //wait until func3 and then continue looping
function func3()
return new Promise(resolve => setTimeout(resolve, 1000));
现在的主要问题 - 如何将其转换为 es5 以便它可以 100% 在 Internet Explorer 中运行。我已经阅读了很多关于“babel”的内容,但我发现的所有内容都是不可理解或过时的。 那么有人可以写一个简短的分步指南如何安装和编译那个小项目吗?
【问题讨论】:
你阅读过 babel 网站上的任何文档吗? babeljs.io Transpile Async Await proposal with Babel.js?的可能重复 【参考方案1】:假设您想快速运行脚本以使用 babel 转译您的 es5 代码,请按照以下说明操作:
您要做的第一件事是设置一个小节点项目。 如果您从未设置过节点项目,请转到: https://nodejs.org/en/download/
一旦您在全局范围内拥有 npm,您就可以转到您的项目文件夹并输入:
npm init
这将为您创建一个 package.json 文件。
转到:https://babeljs.io/docs/setup/#installation
并单击CLI
并按照所有提到的步骤进行操作。
确保为 babel 安装正确的预设以转译异步等待。您需要 es2015 和 stage3 预设以及运行时插件。
http://babeljs.io/docs/plugins/preset-es2015/#install
http://babeljs.io/docs/plugins/preset-stage-3/#install
https://babeljs.io/docs/plugins/transform-runtime/#installation
结帐Transpile Async Await proposal with Babel.js? 以获得更简单的设置。
【讨论】:
预设es2017
不是比stage-3
更有意义吗?
好的,至少它澄清了我的情况。但是编译“Uncaught ReferenceError: require is not defined”后我无法摆脱错误
@zeroflagL es2017 不包含异步生成器函数。 babeljs.io/docs/plugins/transform-async-generator-functions
那是因为它们不是 ES 2017 的一部分。问题不在于它们。
很有趣,但我通过将代码重写为 TypeScript 解决了这个问题 )))以上是关于使用 babel js 将 async/await 编译为 es5的主要内容,如果未能解决你的问题,请参考以下文章
在node.js中使用带有async / await的文件系统