ts-loader迁移至babel-loader

背景

关注社区的应该知道babel 7支持了TypeScript的转译,也就是说我们并不一定非得用之前的方案ts-loader或awesome-typescript-loader。

最近想解决saga报错的易读性,发现官方给出了方案babel-plugin-redux-saga,是个babel插件。

TSlint已经给出了roadmap,2020年只解决修复的MR,以后将只有ESLint, eslint,tslint两个社区的资源正在整合中。TSLoader这块,我理解也类似,Babel丰富的插件机制,加上目前支持了TS的转译,所以大势所趋,合并再花费精力搞这些呢。

基于以上三点考虑,决定做下迁移

配置

package.json

1
2
3
4
5
6
7
8
9
10
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@babel/runtime": "^7.9.6",
"babel-loader": "^8.1.0",

babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = function(api) {
api.cache(true);

return {
presets: [['@babel/preset-env', {
'targets': {
'chrome': '58',
'ie': '11'
}
}], '@babel/preset-react', '@babel/preset-typescript'],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-syntax-dynamic-import',
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread'
]
};
};

webpack.common.js

1
2
3
{
loader: 'babel-loader'
}

效果

经过一番配置后,重新执行启动 or 构建命令,与之前一样正常即可

构建速度

关于速度的对比,可以戳这里

按照babel官方的介绍[原理描述],可以确定速度应该有所提升的。

疑问

TSC本身都可以编译,Babel是否多此一举

  • TSC作为类型检查,@babel/plugin-transform-typescript是不做类型检查的
  • Babel可以根据目标浏览器情况转换部分语法,更为具体丰富

参考文档