Babel 独立：IE11 预期 '('答案

【问题标题】：Babel Standalone: IE11 Expected '('Babel 独立：IE11 预期 '('
【发布时间】：2020-02-24 16:13:12
【问题描述】：

我目前正在尝试让我的 es2017 代码在 IE11 中工作，但不幸的是，由于我的项目性质，我需要在客户端转译代码。

我正在查看其他一些 SO 帖子 (How to install babel and using ES6 locally on Browser?)，它们确实对我有所帮助，但我发现自己被困在了这一点上。

我有以下示例代码，我从上面链接的 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>

然而，当我在浏览器中加载 HTML 时，我在 IE11 上看到了这个错误：

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

我不明白为什么要在此处引用的行上加上括号：

var name = await getUserName(id);

有人可以在这里指出正确的方向吗？我做错了什么？

【问题讨论】：

标签： javascript internet-explorer babeljs babel-polyfill

【解决方案1】：

问题不在于type="text/babel" 脚本中的代码行，由于 IE11 在控制台中为您提供了链接，所以这是一条红鲱鱼。它在 Babel 创建的 generated 脚本中，在这一行：

_process = asyncToGenerator(function* () {

注意 IE 不支持的生成器函数 (function*)。

Babel 的输出是因为示例的 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 并意识到发生了什么。

【讨论】：

哇，你是最棒的！非常感谢您的回答。你的建议非常有效。但是，我还有另一个问题，如果这是非常明显的事情，我提前道歉。你怎么能看到 babel 生成的脚本？我想在进行故障排除时执行此操作，但我不知道如何执行此操作。
@WajihQazi - 一点也不明显。 :-) 在 IE11 的开发工具中，转到 DOM Explorer 窗格，它会显示 DOM 的当前状态。如果您展开head，您将看到添加的script。（Babel Standalone 将生成的脚本附加到 head。）