无法创建异步 Svelte 动作答案

【问题标题】：Can't create asynchronous Svelte action无法创建异步 Svelte 动作
【发布时间】：2020-03-29 07:47:21
【问题描述】：

我正在尝试在 Svelte（use:action 指令）上创建一个异步操作，当我尝试以下“非异步”功能时它工作正常

export default function typewriter(node, options) {
    for (const letter of elementsText[elIndex]) {
        if (!reverse && el.textContent === elementsText[elIndex].join('')) return
        if (reverse && el.textContent === '') return
        if (Array.isArray(interval)) {
            const randomInterval = Math.floor(Math.random() * interval.length)
            // this function needs an `await`
            await sleep(interval[randomInterval])
        } else if (typeof interval == 'number') {
            // this function requires an `await`
            sleep(interval)
        }
        !reverse ? (el.textContent += letter) : (el.textContent = el.textContent.slice(0, -1))
    }
}

但是当我尝试将上面的代码转换为异步函数时，我收到以下错误（可能是babeljs 抛出的）

Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/33527653/…
是的，非常感谢！我对该问题提出的答案进行了一些更改，以使其与 Babel 7 一起使用 ^

标签： babeljs javascript svelte

【解决方案1】：

改编自johnny Babel 6 regeneratorRuntime is not defined上的回答

我使用@babel/plugin-transform-runtime。该插件描述为：

外部化对助手和内置函数的引用，自动填充代码而不污染全局变量。这实际上意味着什么？基本上，您可以使用 Promise、Set、Symbol 等内置插件，也可以无缝使用所有需要 polyfill 的 Babel 功能，而不会造成全局污染，非常适合库。

它还包括对 async/await 以及 ES 6 的其他内置功能的支持。

纱线：

$ yarn add -D @babel/plugin-transform-runtime

npm：

$ npm i -D @babel/plugin-transform-runtime

在.babelrc，添加运行时插件

{
  "plugins": [
    ["@babel/transform-runtime", { "regenerator": true }]
  ]
}

【讨论】：