打字稿转换es6 .js依赖于es5 [英] Typescript transpile es6 .js dependency to es5

问题描述

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

I have a hypothetical Typescript file in my project (simplified example).

Utils.ts ：

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

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

导入 helper-from- node-modules 由一个Javascript文件组成。

Importing helper-from-node-modules consists of a Javascript file.

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的错误。

So my problem is the Typescript compiler's output file is a giant concatenation of my compiled source code plus all of the decencies. Since helper-from-node-modules was always a .js file, the compiler seems to just append its contents to the output file. So, despite "target": "es5" the output file still contains es6 artifacts like const and (e) => {...}, resulting in errors with things later that expect strictly es5 javascript.

是否有告诉Typescript编译器/转换器在javascript依赖项上输出 es5 的方法吗？

Is there is a way to tell the Typescript compiler/transpiler to output es5 on the javascript dependencies as well?

如果你关心上下文：

我犯了一个可怕的错误，即使用 react-create-app-typescript 和 react-scripts-ts 作为我的React应用程序的样板。内置的webpack堆栈非常认为源代码应该来自何处以及编译后的源必须 es5 。如果尝试缩小任何 es6 工件，则打包的minifier / uglifier将崩溃。我知道我可以运行 npm run-script eject 并修改各种配置脚本，但我正在努力避免这种混乱。我很想得到编译到 es6 的源代码，而不是弄乱他们的webpack堆栈。

I made the horrible mistake of using react-create-app-typescript and react-scripts-ts as the boilerplate for my React app. The webpack stack built in is very opinionated on where source code should come from and that the compiled source must be es5. The minifier/uglifier packaged will crash if attempting to minify any es6 artifacts. I know I can run npm run-script eject and modify the various config scripts but I am trying to avoid that mess. I would love to just get the source to compile to es6 and not mess with their webpack stack.

推荐答案

不幸的是，没有办法将依赖项从ES6转换为ES5。 tsconfig.json 中的该选项仅影响如何编译TypeScript代码。你应该做的是使用你的 helper-from-node-modules 的ES5版本。例如，Angular与几个软件包一起分发，用于ES5（umd），ES5，ES6 ......然后，在库的 package.json 中有一些选项可以告诉打包器（通常是webpack）使用什么版本，具体取决于TypeScript的目标用途。

Unfortunately, there isn't a way to do convert dependencies from ES6 to ES5. That option in tsconfig.json only affects how TypeScript code is transpiled. What you should do is use an ES5 version of your helper-from-node-modules. For example, Angular is distributed with several packages, for ES5 (umd), ES5, ES6 ... Then, in the package.json of the library there are options to tell the packager (usually webpack) what version to use, depending on the target use for TypeScript.

如果您使用的库不支持，那么唯一的选择是我自己就是把它转发给ES5，也许是使用babel，或者使用替代品。
但是，对于只能作为ES6发布的库来说，这很奇怪。

If the library you're using does not support that, the only option you have is to transpile it to ES5 yourself, maybe using babel, or use an alternative. Is is strange, however, for a library to be only distributed as ES6.

这篇关于打字稿转换es6 .js依赖于es5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！