[我目前正在尝试使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);
有人可以在这里指出正确的方向吗?我在做什么错?
问题不在于您的type="text/babel"
脚本中的代码行,这是红色的鲱鱼,这要归功于IE11在控制台中为您提供的链接。它位于Babel创建的生成脚本中,在此行:
_process = asyncToGenerator(function* () {
请注意IE不支持的生成器功能(function*
)。
这是因为data-presets
错误。该示例具有data-presets="es2017, stage-3"
,但是并没有告诉Babel它需要转换ES2015和ES2016,因此它假定它可以使用与ES2015中相同的生成器函数。
要修复它,请将它们添加到您的预设中:data-presets="es2015, es2016, es2017, stage-3"