使用 webpack 的 Typescript 中的 ts-loader 与 babel-loader

问题描述

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

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
中使用缓存

问题

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

解决方法

对于您的问题：

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

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