在 Web 中运行的 TypeScript 中未定义 regeneratorRuntime答案

【问题标题】：regeneratorRuntime is not defined in TypeScript run in web在 Web 中运行的 TypeScript 中未定义 regeneratorRuntime
【发布时间】：2018-12-18 02:57:32
【问题描述】：

我用 Vue.js + TypeScript + Parcel 做了一个演示，并在 index.ts 中尝试async/await。

index.html

<html>
...
<body>
  <script src="index.ts"></script>
</body>
</html>

index.ts

console.log('Not see me')
(async () => {
  console.log('Did not execute here too.')
})()

执行parcel index.html并打开http://localhost:1234/。控制台报错：regeneratorRuntime is not defined

index.a4a28941.js:110 Uncaught ReferenceError: regeneratorRuntime is not defined
    at index.a4a28941.js:110
    at Object.parcelRequire.306 (index.ts:3)
    at newRequire (index.a4a28941.js:48)
    at parcelRequire.306 (index.a4a28941.js:80)
    at index.a4a28941.js:106

async 语法似乎需要 polyfill？

这是我的 tsconfig.json：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "esnext.array", "dom", "dom.iterable", "scripthost", "es2015.generator"]
  },
  "parcelTsPluginOptions": {
    // If true type-checking is disabled
    "transpileOnly": false
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

【问题讨论】：

标签： typescript vue.js parceljs

【解决方案1】：

我的解决方案是在tsconfig.jsonfile 中将target 设置为"es5"：

{
  "compilerOptions": {
    "target": "es5"
  }
}

然而，parcel 似乎总是使用 babel 来转换 javascript，这会导致 typescript 编译器发生一些冲突（参见此处：https://github.com/parcel-bundler/parcel/issues/954 和此处：https://github.com/parcel-bundler/parcel/issues/871）。有些人还通过在他们的项目中要求 babel-polifill 解决了这个问题，但如果你只想使用 typescript 编译器而不用 babel 转换任何东西，这似乎不是最好的选择。

【讨论】：