为啥要使用 babel-loader 和 ts-loader？

Posted 2023-03-13

【中文标题】为啥要使用 babel-loader 和 ts-loader？

【英文标题】：Why use babel-loader with ts-loader?为什么要使用 babel-loader 和 ts-loader？

【发布时间】：2018-09-12 10:23:58

【问题描述】：

有一个TypeScript, Babel, React, and Karma Sample。

Webpack 配置包含 babel-loader 和 ts-loader 用于 .tsx? 文件。

请解释为什么需要它？为什么 ts-loader 不够用？

【问题讨论】：

不需要。关键是这是可能的。因此样本名称为“react-flux-babel-karma”。

【参考方案1】：

ts-loader：将typescript (es6) 转换为javascript (es6)

babel-loader：将javascript (es6) 转换为javascript (es5) 和Typescript 不做polyfills，babel 做。如果您在es6 中编写客户端代码并希望它在现代浏览器上运行，您可能需要babel 的polyfills。

使用服务器端代码不太合理 - 只需使用最新的 node 版本即可获得 es6 支持。但是 babel 仍然提供了一些 tsc 没有的好东西——比如缓存，或者非常有用的大量插件。

这不是必需的，而是一起使用它们的练习。

【讨论】：

据我所知，我们手动使用 babel-polyfills。不是吗？你能举出使用huge range of plugins that can be usefull 处理打字稿文件的例子吗？

tsconfig的编译器选项中的'target'选项也可以是es5。所以你错了

@Yuriy 她没有错。你需要 ES6 模块来做 tree-shaking。

Babel 7 现在可以使用 babel-preset-typescript 将 TS 转换为 JS，并且 TS 只处理类型检查。 github.com/Microsoft/TypeScript-Babel-Starter

仅供参考 @Yuriy 的设置（目标 es5 / 模块 es6）是我使用的。 Webpack 可以原生地捆绑 ES6 模块，因此本身并不真正需要 babel。通过这个设置，当你进行生产构建时，默认情况下 Webpack 会或多或少地摇树。