2017-01-15 3 views
0

У меня действительно маленький проект с одним файлом .html и одним файлом .js. Проблема, что я использовал функции asyn/await, поэтому мне нужно преобразовать ее в es5, чтобы быть уверенным, что все работает нормально.Компиляция asyn/ожидание es5 с babel js

Итак, мой .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% woks в Internet Explorer. Я много читал о «бабиле», но все, что я нашел, непонятно или устарело. Может ли кто-нибудь написать краткое пошаговое руководство по установке и компиляции этого небольшого проекта?

+1

Вы прочитали какую-либо документацию на веб-сайте babel? https://babeljs.io –

+0

Возможный дубликат проекта [Transpile Async Await with Babel.js?] (http://stackoverflow.com/q/28708975/218196) –

ответ

1

если вы хотите быстро запустить сценарий для transpile код ES5 с столпотворение следующие инструкции:

  • первое, что вы должны TODO является установка немного проекта узла. , если вы никогда не настроить проект узла Готы: https://nodejs.org/en/download/

  • как только у вас есть НПЕ глобально вы можете перейти в папку проекта и тип: npm init это создаст вам файл package.json.

  • перейти: https://babeljs.io/docs/setup/#installation и нажмите CLI и выполните все указанные шаги.

  • Убедитесь, что вы установили правильные пресеты для babel для переадресации async. Вам понадобятся предварительные настройки 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? для более минимальной настройки.
+0

Не будет ли предустановленный 'es2017' более понятным, чем 'этап-3'? – zeroflagL

+0

Хорошо, по крайней мере, это разъясняет мне ситуацию. Но я не могу избавиться от ошибки после компиляции «Uncaught ReferenceError: require не определен» – dantey89

+0

@zeroflagL es2017 не содержит функции асинхронного генератора. http://babeljs.io/docs/plugins/transform-async-generator-functions/ –

Смежные вопросы