ts-loader迁移至babel-loader

发表于 更新于 本文字数： 1.8k 阅读时长 ≈ 3 分钟
本文是作者对ts-loader迁移至babel-loader的介绍，包括ts-loader迁移至babel-loader的优势、实现细节、相关资料等，这些步骤可以帮助作者提高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/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-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可以根据目标浏览器情况转换部分语法，更为具体丰富

参考文档