在使用webpack时，TypeScript的ts-loader和babel-loader有什么区别？

Question

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

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似乎在底层使用了babel，至少它在依赖中有babel的存在。
• 另外，babel-loader允许使用cacheDirectory缓存。

问题

1. 是否有办法像babel中的cacheDirectory一样在ts-loader中使用缓存？
2. 使用ts-loader相比babel-loader还有其他好处吗？

- fjplaurr

---

我将发起一份悬赏，因为我对这个主题很感兴趣，而且根据投票数看来还有更多的人也很感兴趣。 - fjplaurr

你读过这篇文章吗？https://kevinwil.de/differences-in-output-of-typescript-compiler-and-babel-for-classes/ - silkfire

对于您的第一个问题，ts-loader有一个配置选项，但是它的名称中包含实验性质，所以我不会依赖它。对于您的第二个问题，我没有使用过ts-loader，因为babel-loader在一个单一的软件包中提供了所有功能甚至更多。即使我使用了ts-loader，我仍然需要使用babel进行其他转换。这里有帮助。 - hackhan

Answer 1

针对你的问题:

1. 如有需要，ts-loader中有一个实验性设置可以允许缓存，你可以查看配置参考获取更多信息: https://github.com/TypeStrong/ts-loader#experimentalfilecaching
2. 据我所知，Babel本身不进行类型检查，因此您需要运行TSC来进行类型检查。另外，它不支持ts的'const enum'语法...

同时，您可以混合使用这两种工具，在开发环境使用ts-loader，在生产环境使用babel。

- JJWorren