Babel Standable:IE11 預期'('



我目前正在尝试让我的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>

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

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

我不明白为什么它在这里引用的行上需要一个括号:

var name = await getUserName(id);

有人能在这里给我指正确的方向吗?我做错了什么?

问题不在于type="text/babel"脚本中的代码行,由于IE11在控制台中为您提供了链接,这只是转移注意力。它在Babel创建的生成的脚本中,在这一行:

_process = asyncToGenerator(function* () {

注意生成器函数(function*(,IE不支持它。

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,并意识到发生了什么。

最新更新