Babel Автономный: IE11 Ожидается '(' - PullRequest
Новая
       120

Babel Автономный: IE11 Ожидается '('

2 голосов
/ 24 февраля 2020

В настоящее время я пытаюсь заставить мой код es2017 работать в IE11, и, к сожалению, мне нужно перенести код на стороне клиента из-за характера моего проекта.

Я просматривал некоторые другие сообщения SO ( Как установить babel и использовать ES6 локально в браузере? ), что немного помогло, но я застрял в этой точке.

У меня есть следующий пример кода, который я взял из SO-вопроса, который я связал выше, чтобы проверить: 

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <h1>Standalone Async/Await Example</h1>
      <!-- Load Babel -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js" type="text/javascript"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-generators">
         /* Output of Babel object */
         console.log('Babel =', Babel);

         var users = { '123' : { name : 'Joe Montana'} };
         process();
         async function process()
         {
            var id = await getId(); 

            var name = await getUserName(id);   
            console.log("User Name: "+name);
         }
         function getId()
         {
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('calling'); resolve("123"); }, 2000);
            });
         }
         function getUserName(id)
         {
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('requesting user name with id: '+id); resolve(users[id].name); }, 3000);
            });
         }
      </script>
   </body>
</html>

Однако я вижу эту ошибку в IE11 при загрузке HTML в браузере: 

SCRIPT1005: Expected '('
File: testAsync.html, Line: 19, Column: 40

Я не могу понять, почему в строке, на которую она ссылается здесь, ожидается скобка: 

var name = await getUserName(id);

Может ли кто-нибудь указать мне правильное направление здесь? Что я делаю неправильно?

1 Ответ

3 голосов
/ 24 февраля 2020

Проблема не в строке кода в вашем скрипте type="text/babel", это красная сельдь благодаря ссылке, которую IE11 дает вам в консоли. Это в сгенерированном скрипте, который создал Бабель, в этой строке: 

_process = asyncToGenerator(function* () {

Обратите внимание на функцию генератора (function*), которую IE не поддерживает.

Вывод Бабеля, потому что пример data-presets неполон. В этом примере data-presets="es2017, stage-3", но это не говорит о том, что Babel нужно переносить ES2015 и ES2016, поэтому предполагается, что он может использовать функцию генератора, как это было в ES2015.

Чтобы исправить это, добавьте их в Ваши предустановки: data-presets="es2015, es2016, es2017, stage-3"

Вот как я это диагностировал, на случай, если это будет полезно: поскольку код в скрипте type="text/babel" был синтаксически верным, я знал, что это не так. Поэтому я решил, что это должен быть результат. Я мог видеть полученный результат в IE11 DOM Explorer и заметил function* в нем. Так что я знал, что есть проблема с транспарантом, и решил, что это была та строка, но IE11 не позволил бы мне скопировать код, поэтому, если бы я мог видеть, была ли это строка 19. Так что я запустил его в Brave (то есть Chrome - вроде), скопировал сгенерированный код, и это действительно была строка 19 в нем. Это заставило меня более внимательно посмотреть на data-presets и понять, что происходит.

...