ts-loader vs babel-loader 在 Typescript 中使用 webpack答案

【问题标题】：ts-loader vs babel-loader in Typescript using webpackts-loader vs babel-loader 在 Typescript 中使用 webpack
【发布时间】：2021-05-05 14:15:54
【问题描述】：

所以我试图比较这两种组合的输出编译代码。

ts-loader

  {
    test: /\.tsx?$/,
    use: 'ts-loader',
  }

babel-loader

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

babel-loader 的编译时间低于 ts-loader。
另外，ts-loader looks to be using babel under the hood，至少它在它的依赖项中。
另外，babel-loader 允许通过 cacheDirectory 使用缓存

问题

有没有办法像 babel 中的 cacheDirectory 一样在 ts-loader 中使用缓存？
使用 ts-loader 代替 babel-loader 有什么其他好处吗？

【问题讨论】：

我要开始赏金了，因为我对这个话题很感兴趣，看到点赞，我想还有更多人感兴趣。
你读过这篇文章吗？ kevinwil.de/…
对于您的第一个问题，ts-loader 有一个config option，但它的名称似乎具有实验性，所以我不会依赖它。对于您的第二个问题，我没有使用 ts-loader 仅仅是因为 babel-loader 在一个包中提供了所有内容以及更多内容。即使我使用了 ts-loader，我仍然需要 babel 来进行其他转换。 This would help

标签： typescript webpack babeljs babel-loader ts-loader

【解决方案1】：

对于您的问题：

正如有人已经提到的，在 ts-loader 中有一个实验性设置允许缓存，您可以查看配置参考以获取更多信息：https://github.com/TypeStrong/ts-loader#experimentalfilecaching
Afaik babel 自身不进行类型检查，因此您必须为此运行 TSC。它也不支持 ts 的 'const enum' 语法...

您也可以混合使用 2，将 ts-loader 用于开发，将 babel 用于产品构建。

【讨论】：