webpack中ts编译加兼容性转换：swc对比babel+tsc，附示例代码

小龟壳@greaclar

已于 2023-07-27 17:05:34 修改

阅读量2.2k

点赞数 3

分类专栏：前端学习笔记文章标签： webpack javascript 前端 typescript

于 2023-06-12 23:45:27 首次发布

本文链接：https://blog.csdn.net/weixin_50794208/article/details/131178834

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

示例代码gitee链接，文章末端是三种方式的webpack配置

这里tsc是指使用typescript依赖将ts编译为js，另外阅读本文需要ts和babel基础，可以点击了解babel相关介绍，测试版本@swc/core v1.3.62

在webapck中对ts文件一般需要进行两个处理：

ts转译为js
对js进行兼容性转换

传统且稳妥的做法是先通过ts-loader进行ts代码转译，然后再使用babel-loader进行兼容性转换。

优点：ts编译最灵活，可以使用tsconfig.js丰富的配置项。同时还会在编译ts时，进行类型检查，在控制台输出错误，中断编译；兼容性转换准确性高。
缺点：编译慢

当然也可以只使用babel进行ts转换和兼容性处理，只需要添加@babel/preset-typescript预设即可。

优点：编译ts文件速度相对前面一种更快更简单；兼容性转换准确性高。
缺点：不会读取tsconfig.js的配置项，也不会做类型检查（只会进行语法转换），即使类型使用不规范，仍能编译成功。

另一个方案是使用swc，功能也是ts语法转换和兼容性处理，功能和babel基本相同。

优点：就是快，开发模式比babel快一倍，打包构建快4倍！目前仍在快速迭代中。
缺点：ts编译结果与tsc存在一定差异。同样不会读取tsconfig.js的配置项，也不会做类型检查（只会进行语法转换）；极端环境下，兼容性转换准确性待提高。

swc的潜力不仅是快，更重要的是，可以在使用ts-lader、babel-loader的webpack老项目中直接切换使用。如果不喜欢，修改配置项换回来即可，切换成本极低。

编译时间对比

只使用一台普通笔记本，简单使用ts实现了两个库的webpack项目demo

耗时	只有ts-loader	ts-loader加babel-loader	babel-loader(含ts转译)	swc-loader
启动调试服务	<=2000ms	<=5000ms	3000ms+	<=2000ms
打包构建	2000ms+	3300ms+	<=2000ms	<=500ms

由于webpack缓存等原因，存在较大的误差，但无可否认swc在速度上是明显更快的，而且在开发过程中，热更新也是最快的。

转换效果对比

swc虽然速度快，但实际使用并不能完全替换tsc的ts文件编译能力，或babel的兼容性处理能力。经过简单的测试对比，一些区别：

编译ts代码

swc不会将代码中的汉字转为Unicode，而tsc或babel会把代码里非注释的汉字转为Unicode。

// ts 代码
let msg:string = '成功';

// tsc编译结果
let msg = "\u6210\u529F";

// babel编译结果
let msg = "\u6210\u529F";

// swc编译结果
let msg = "成功";

swc或babel编译ts时，无论是否有const修饰的枚举类，都会在js代码里生成对应枚举对象。而tsc在有const修饰的情况下，不会生成枚举对象。

// ts 代码
export const enum msg {
    expired = '已过期',
    noFound = '不存在',
    success = '成功'
}
let str:string = msg.success

// tsc 编译结果不会生成任何msg枚举类的代码，会直接使用它们的值进行替换
let str = "\u6210\u529F";

// babel编译结果
var msg = /*#__PURE__*/function (msg) {
   msg["expired"] = "\u5DF2\u8FC7\u671F";
   msg["noFound"] = "\u4E0D\u5B58\u5728";
   msg["success"] = "\u6210\u529F";
   return msg;
 }({});
 var str = msg.success;

// swc编译结果
var msg;
(function(msg) {
    msg["expired"] = '已过期';
    msg["noFound"] = '不存在';
    msg["success"] = '成功';
})(msg || (msg = {}));
var str = msg.success;

兼容性转换

虽然tsconfig.js可以配置ts代码转译为es5，但是只能实现语法转换，如箭头函数转换等；但api类如promise、set等是无法转换的。所以仍需要babel来进行兼容性处理。

使用babel，基本不会碰上什么问题，使用官方示例配置基本可以实现预期效果。在配置browserslist为ie 11的条件下，以下是swc存在的两个问题：

问题1：

如果使用swc进行兼容性转换，代码里有动态导入语法import() ，ie11 运行会报错：Unhandled promise rejection TypeError: [object Promise] is not iterable
原因：
swc在按需导入core-js时，不够babel精确，只兼容了部分promise功能，而动态导入需要更高级的promise。所以只要在代码中全量引入promise的profill就不会报错：

import 'core-js/actual/promise';

问题2：

无论是swc还是babel，都会生成辅助函数。为了防止辅助函数重复打包：babel通过@babel/plugin-transform-runtime把辅助代码抽离。而swc只需要设置externalHelpers:true，并下载@swc/helpers即可。但swc设置后，在ie11执行报错：缺少’:‘。
ie11下报错：缺少’：‘

原因：
在抽离的代码中使用了键值相同，可合并键值的语法，无法被ie11识别：
在这里插入图片描述

以上两个问题只是在配置时碰到，可能还有其它地方。

总结

由此可见，swc目前最突出的问题是兼容性处理没有babel严谨，即使是官方辅助函数也没有考虑到兼容性问题。
在兼容性处理上，swc与babel还是有一定的差距，如果有兼容性要求很严格的项目还是不要轻易尝试了，但是如果只需要兼容最近的主流浏览器也是基本没问题的。

配置tsc+babel

使用ts-loader处理ts，转换为js，并使用babel-loader将代码转为兼容低版本浏览器的代码。

首先，安装依赖：

npm i typescript ts-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime babel-loader core-js -D

如果项目里没有tsconfig.js，执行npx tsc --init,生成。

在tsconfig.js中要注意，module取值不要取值为commenjs，否则浏览器会报exports未定义的错误，可以设置为：

{
    // ...其它配置
    "module": "ESNext", 
    "moduleResolution": "node",
}

配置ts-loader和babel-loader

rules: [
    {
        test: /.ts$/,
        exclude: /(node_modules|bower_components)/,
        use: [
            {
                loader: 'babel-loader',
                options: {},
            },
            'ts-loader'
        ]
    }
]

配置babel.config.js(项目根目录)

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                corejs: '3.31.0' // 对应你下载的core-js版本
            }
        ]
    ],
    // 这里要@babel/runtime
    plugins: ['@babel/plugin-transform-runtime']
}

配置目标浏览器，在package.json中添加：

// package.json
{
    "browserslist": [
        "ie 11"
      ]
}

然后就可以执行打包了

配置babel（可编译ts）

babel配置@babel/preset-typescript预设后，也可以转换ts代码，同时兼容性转换能力也可以正常使用。

首先，安装依赖：

npm i @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime babel-loader core-js -D

配置babel-loader

rules: [
    {
        test: /.ts$/,
        exclude: /(node_modules|bower_components)/,
        use: [
            {
                loader: 'babel-loader',
                options: {},
            }
        ]
    }
]

配置babel.config.js(项目根目录)

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                corejs: '3.31.0' // 对应你下载的core-js版本
            }
        ],
        // 转译ts的预设
        '@babel/preset-typescript'
    ],
    // 依赖@babel/runtime
    plugins: ['@babel/plugin-transform-runtime']
}

配置目标浏览器，在package.json中添加：

// package.json
{
    "browserslist": [
        "ie 11"
      ]
}

然后就可以执行打包了

配置swc

swc自称是极快的ts/js编译工具，不仅可以转换ts，也能把js转换为兼容低版本的代码。

下载依赖

npm i @swc/core swc-loader @swc/helpers core-js -D

配置swc-babel

rules: [
    {
        test: /\.ts$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: "swc-loader"
        }
    },
]

配置.swcrc(项目根目录)

{
    "jsc": {
        "parser": {
            "syntax": "typescript", // 解析ts
            "tsx": false,
            "decorators": false,
            "dynamicImport": true
        },
        "target": "esnext",
        "loose": false,
        "externalHelpers": false, // 把兼容低版本的公共函数抽离到独立模块
        // Requires v1.2.50 or upper and requires target to be es2016 or upper.
        "keepClassNames": false
    },
    "minify": false,
    "env": {
        "forceAllTransforms":true,
        "mode": "usage", // 按需引入core-js
        "coreJs": "3.31.0" // core-js版本
    }
}