使用 babel js 编译 asyn/await 为 es5

Question

我有一个非常小的项目，只有一个 .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" 的内容，但我发现的所有内容都无法理解或已过时。那么有人可以写一个简短的分步指南来安装和编译那个小项目吗？

Answer 1

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

您要做的第一件事是设置一个小节点项目。如果您从未设置过节点项目，请转到： https://nodejs.org/en/download/
一旦你有了 npm 全局，你就可以转到你的项目文件夹并输入： npm init 这将为您创建一个 package.json 文件。
转到：https://babeljs.io/docs/setup/#installation 然后单击 CLI 并按照所有提到的步骤进行操作。
确保为 babel 安装正确的预设以转译异步等待。您将需要 es2015 和 stage3 预设以及运行time 插件。
- 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
- 查看以获得更精简的设置。

使用 babel js 编译 asyn/await 为 es5

Compile asyn/await to es5 with babel js

javascript

babeljs

ecmascript-5

ecmascript-2017