建议用babel-loader预编译器@babel/preset-typescript替代ts-loader结合webpack使用

分类:环境配置来源:站内 最近更新:2022-11-24 09:32:32浏览:24留言:0

建议用babel-loader预编译器@babel/preset-typescript替代ts-loader结合webpack使用

ts-loader用于TypeScript 加载器,将 TypeScript(ES6) 编译成 JavaScript(es6)。而Typescript没有做polyfills,所以要编译成ES5依旧得要babel-loader。

ts-loader结合webpack使用如下:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
             //……
            }
          }
        ]
      }
    ]
  }
}

在对比过程中,百度过其他的加载器,如awesome-typescript-loader

awesome-typescript-loader相对ts-loader编译速度更快,不需要按照其他独立的插件,和webpack接结合如下:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'awesome-typesscript-loader',
            //……
          }
        ]
      }
    ]
  }
}


最后,我们更推荐用babel-loader,babel本身是移除了ts,因为Babel 具备缓存和单文件散发架构能力,Babel配合TypeScript 会提供了更快的编译。这是 Babel 在编译过程中剥离 TypeScript 的第一个优势。而Babel一般采用预编译的方式,也就是babel在起初编译剥离了ts,ts的类型检查在项目启动好的时候才进行,这就是第二优势,也是bable编译速度比较快的原因。

推荐加载器如下配置

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

测试版本如下:

{
"@babel/core": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.17.12",
"@babel/plugin-transform-runtime": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.18.6",
"@babel/runtime-corejs2": "^7.18.3",
"@types/react-transition-group": "^4.4.5",
}


0

发表评论

评论列表(0)

  • 暂时没有留言
热门