使用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預設以及運行時插件。
- 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的Transpile Async Await提案？ 以獲得更小的設置。

使用Babel JS將Asyn / await編譯到es5

問題描述

1 個解決方案

解決方案1
2 已采納 2017-01-15 16:29:48

使用Babel JS將Asyn / await編譯到es5

問題描述

1 個解決方案

解決方案1 2 已采納 2017-01-15 16:29:48

解決方案1
2 已采納 2017-01-15 16:29:48