gpt4 book ai didi

javascript - 将 async/await 与 babel js 结合到 es5

转载 作者:行者123 更新时间:2023-11-30 15:35:10 27 4
gpt4 key购买 nike

我有一个非常小的项目,只有一个 .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 以便它可以在 Internet Explorer 中 100% 工作。我读过很多关于“babel”的文章,但我发现的所有内容都无法理解或已过时。那么有人可以写一个简短的分步指南来安装和编译那个小项目吗?

最佳答案

假设你想快速运行一个脚本来使用 babel 转译你的 es5 代码,请遵循以下说明:

  • 您要做的第一件事是设置一个小节点项目。如果您从未设置过节点项目,请转到: https://nodejs.org/en/download/

  • 一旦你有了全局的 npm,你就可以转到你的项目文件夹并输入:
    npm 初始化
    这将为您创建一个 package.json 文件。

  • 转到:https://babeljs.io/docs/setup/#installation然后单击 CLI 并按照上述所有步骤进行操作。

  • 确保为 babel 安装正确的预设以转译 async await。您将需要 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?进行更简单的设置。

关于javascript - 将 async/await 与 babel js 结合到 es5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41662916/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com