使用 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-loader 允许将缓存与cacheDirectory一起使用

问题

1. 有没有办法像babel 中的cacheDirectory一样在 ts-loader 中使用缓存？
2. 使用 ts-loader 而不是 babel-loader 有什么其他好处？

Answer 1

对于您的问题：

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

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