描述
对于 TypeScript 项目，我们都会结合 webpack 等构建工具来打包。 在 webpack 中，编译 ts 文件有两种方式。
- 使用 ts-loader 编译。
- 使用 babel-loader 编译。
ts-loader
首先安装 ts-loader typescript
npm i ts-loader typescript
使用 ts-loader 编译，它其实就是使用的 tsc 进行编译，所以需要依赖 typescript 和 ts.config.json 配置文件。
ts.config.json
{
"compilerOptions": {
"target": "es5" // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
},
"exclude": ["./node_modules"]
}
webpack.config.js
module: {
rules: [
{
test: /\.ts$/,
use: ["ts-loader"],
exclude: /node_modules/, //排除 node_modules 目录
},
],
}
babel-loader
需要使用 @babel/preset-typescript 来识别 ts。
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3"
}
],
"@babel/preset-typescript"
]
}
webpack.config.js
module: {
rules: [
{
test: /\.ts$/,
use: ["babel-loader"],
exclude: /node_modules/, //排除 node_modules 目录
},
],
}
使用 babel-loader 处理 TypeScript 的优势在于能够动态按需引入 polyfill，而 ts-loader 不支持此功能，它需要在入口文件中全量引入 polyfill。如果要进一步优化，可以配置@babel/plugin-transform-runtime 插件以抽离常用的辅助函数。
总结
- ts-loader 不支持 polyfill 按需引入。babel-loader 支持，还可以配置 @babel/plugin-transform-runtime 插件来抽离公共辅助函数。
- ts-loader 支持错误检测，如果语法有问题会编译不成功。babel-loader 是不支持，需要单独利用 tsc 单独配置。
ts-loader 优缺点：
- 优点：对 TypeScript 的支持非常好，它可以更准确地处理 TypeScript 文件中的类型信息，提供更好的类型检查和错误提示。
- 缺点：相对来说，ts-loader 的性能较差，它需要调用 TypeScript 编译器进行类型检查和转换，可能会导致构建时间较长。
- 适用场景：对于纯 TypeScript 项目，或 TypeScript 与 JavaScript 混合的项目，使用 ts-loader 是比较合适的选择。
babel-loader + @babel/preset-typescript 优缺点：
- 优点：相对来说，babel-loader 的性能更高，它只需要进行语法转换，而不需要进行类型检查，可以更快地进行构建。同时，@babel/preset-typescript 支持 TypeScript 的所有语法和特性，可以完全满足大部分 TypeScript 项目的需求。
- 缺点：相对来说，babel-loader 对 TypeScript 的支持没有 ts-loader 那么好，它不能提供像 ts-loader 那样的类型检查和错误提示。
- 适用场景：对于已经使用 Babel 的项目，或者只需要进行简单的语法转换和类型检查的 TypeScript 项目，使用 babel-loader + @babel/preset-typescript 是比较合适的选择。
综上所述，选择使用哪种方式取决于项目的具体需求和开发人员的偏好。对于需要更好的类型检查和错误提示的 TypeScript 项目，使用 ts-loader 是比较合适的选择；对于已经使用 Babel 的项目或只需要进行简单的语法转换和类型检查的 TypeScript 项目，使用 babel-loader + @babel/preset-typescript 是比较合适的选择。
