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

2023-12-20 18:30

本文主要是介绍webpack中ts编译加兼容性转换:swc对比babel+tsc,附示例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

示例代码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-loaderts-loader加babel-loaderbabel-loader(含ts转译)swc-loader
启动调试服务<=2000ms<=5000ms3000ms+<=2000ms
打包构建2000ms+3300ms+<=2000ms<=500ms

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

转换效果对比

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

编译ts代码

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

    // ts 代码
    let msg:string = '成功';// tsc编译结果
    let msg = "\u6210\u529F";// babel编译结果
    let msg = "\u6210\u529F";// swc编译结果
    let msg = "成功";
    
  2. 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/runtimeplugins: ['@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/runtimeplugins: ['@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版本}
}

然后就可以执行打包了

这篇关于webpack中ts编译加兼容性转换:swc对比babel+tsc,附示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/517027

相关文章

Python中的Walrus运算符分析示例详解

《Python中的Walrus运算符分析示例详解》Python中的Walrus运算符(:=)是Python3.8引入的一个新特性,允许在表达式中同时赋值和返回值,它的核心作用是减少重复计算,提升代码简... 目录1. 在循环中避免重复计算2. 在条件判断中同时赋值变量3. 在列表推导式或字典推导式中简化逻辑

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组