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

Posted 2023-03-13

【中文标题】ts-loader vs babel-loader 在 Typescript 中使用 webpack

【英文标题】：ts-loader vs babel-loader in Typescript using 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

【参考方案1】：

对于您的问题：

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

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