【问题标题】:How to enable async/await with babel with support for IE11如何使用支持 IE11 的 babel 启用 async/await
【发布时间】:2019-11-11 13:31:25
【问题描述】:

我希望在我的源代码中使用 async/await 并让 babel 将其转译为 >0.25% not dead 可用的东西。

我头晕目眩,有很多方法可以解决这个问题。有些已被弃用,有些完全不工作,而我已经开始工作的那个使我的库的大小增加了一倍以上。

我尝试将@babel/polyfill@babel/plugin-transform-async-to-generator 一起使用,效果很好,但是库从~500kB 到~1.1MB。

我还尝试将其留给@babel/preset-env,将其提供给>0.25% not dead,但这并没有什么不同。我明白了:

regeneratorRuntime 未定义

我希望有比包含所有这些regeneratorRuntime 的东西更好的方法...

我宁愿回到末日的回调金字塔,也不愿运送超过 1mb 的库...

我正在使用:

  • webpack 4.41.0
  • babel 7.6.2

【问题讨论】:

  • 是的,通常你不想使用 babel 来编译你的库代码。您可能需要 polyfill,但您不想依赖库中的转译。
  • 为你的@babel/preset-env 设置什么你的useBuiltIns 呢?尝试将其设置为 entry 看看是否有帮助。
  • @user1538301 不确定您的意思。如何使用 polyfill 获得异步等待?
  • @MatthewGoulart 你不会,你只是不会使用它。您可以使用 polyfill 获得 Promises,我更喜欢 async/await(我不喜欢 async/await 如何更改返回类型。我想确切地知道我在看什么)
  • @user1538301Interesting... 你能详细说明你为什么不这样做吗?使用 babel 有什么缺点?在什么情况下使用 babel?

标签: javascript async-await internet-explorer-11 babeljs


【解决方案1】:

如果您只需要生成器 polyfill(async/await 需要它),那么您可以使用 facebook/regenerator

您可以按照以下步骤在 IE 11 中支持 async/await:

  • 使用babel-preset-env
  • yarn add regeneratornpm install regenerator
  • node_modules/regenerator-runtime/runtime.js (10.7kb minified) 添加到您的捆绑包中

参考链接:Add ES7 Async/Await Support for your Webapp in 3 Easy Steps

【讨论】:

  • 在添加到捆绑包的大小和使用新功能之间取得了良好的折衷。尤其是考虑到 async/await 的纯粹乐趣。谢谢!
  • 只是一个关于步骤的简单问题。我已经安装了 regenerator,但是将 node_modules/regenerator... 添加到你的包中的是什么。意思是?
  • 如何将 node_modules/regenerator-runtime/runtime.js(10.7kb 缩小)添加到您的包中?我很困惑添加一些东西到我的捆绑包中意味着什么
  • @user3717206 我想这意味着你只需要将node_modules/regenerator-runtime/runtime.js这个文件添加到你需要的项目中。
  • 那个 webpack 的东西对我不起作用,但这篇文章做到了 dev.to/btandayamo/…
猜你喜欢
  • 1970-01-01
  • 2018-01-16
  • 2017-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-09-08
  • 1970-01-01
  • 2017-08-31
相关资源
最近更新 更多