javascript - Typescript 将 es6 .js 依赖转译为 es5

Question

我的项目中有一个假设的 Typescript 文件(简化示例)。

Utils.ts:

import * as HelperFromNodeModules from 'helper-from-node-modules';

class Utils {
  static foo() {
    return HelperFromNodeModules.parse(...);
  }
}

导入 helper-from-node-modules 包含一个 Javascript 文件。

helper-from-node-modules.js:

const dep = require('foo');
function parse(...) {
   return bar.map((e) => {...});
}

来自 @types/helper-from-node-modules index.d.ts:

export function parse(...);

除其他外，tsconfig.json 包含以下内容:

{
  ...
  "target": "es5",
  "lib": ["es2015.collection","es6", "dom"],
  "sourceMap": true,
  "allowJs": true,
  ...
}

所以我的问题是 Typescript 编译器的输出文件是我编译的源代码加上所有规范的巨大串联。由于 helper-from-node-modules 始终是 .js 文件，编译器似乎只是将其内容附加到输出文件。因此，尽管 "target": "es5" 输出文件仍然包含 es6 工件，如 const 和 (e) => { ...}，导致以后出现严格 es5 javascript 错误。

有没有办法告诉 Typescript 编译器/转译器在 javascript 依赖项上也输出 es5？

上下文如果你关心:

我犯了一个可怕的错误，那就是使用 react-create-app-typescript 和 react-scripts-ts 作为我的 React 应用程序的样板。内置的 webpack 堆栈非常对源代码应该来自哪里以及编译后的源代码必须是es5固执己见。如果尝试缩小任何 es6 工件，打包的缩小器/丑化器将崩溃。我知道我可以运行 npm run-script eject 并修改各种配置脚本，但我正在努力避免这种困惑。我很乐意只获取编译成 es6 的源代码，而不是弄乱他们的 webpack 堆栈。

Answer 1

不幸的是，没有办法将依赖项从 ES6 转换为 ES5。 tsconfig.json 中的选项只会影响 TypeScript 代码的转译方式。您应该做的是使用 helper-from-node-modules 的 ES5 版本。例如，Angular 分发了几个包，用于 ES5 (umd)、ES5、ES6 ... 然后，在库的 package.json 中有选项告诉打包器(通常是 webpack)使用哪个版本，具体取决于 TypeScript 的目标用途。

如果您使用的库不支持它，您唯一的选择就是自己将其转译为 ES5，也许使用 babel，或者使用替代方案。然而，对于仅作为 ES6 分发的库来说，这很奇怪。