文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一文带你了解新一代的编译工具 SWC

2024-12-02 09:54

关注

最近前端圈掀起了一阵 rust 风,凡是能用 rust 重写的前端工具就用 rust 重写,今天介绍的工具就是通过 rust 实现的 bable:swc,一个将 ES6 转化为 ES5 的工具。

而且在 swc 的官网,很直白说自己和 babel 对标,swc 和 babel 命令可以相互替换,并且大部分的 babel 插件也已经实现。

使用 rust 的一个优势就是快,比如我们之前的一个项目,将 babel 替换成 swc 后,编译速度从原来的 7 秒提升到了 1 秒,效率直接爆炸。

上手

swc 与 babel 一样,将命令行工具、编译核心模块分化为两个包。

  1. npm i -D @swc/cli @swc/core 

通过如下命令,可以将一个 ES6 的 JS 文件转化为 ES5。

  1. npx swc source.js -o dist.js 

下面是 source.js 的代码:

  1. const start = () => { 
  2.   console.log('app started'

代码中囊括了 ES6 的两个特性,const 声明 和 箭头函数。经过 swc 转化后,这两个特性分别被转化成了 var 声明 和 function 匿名函数。

配置文件

swc 与 babel 一样,支持类似于 .babelrc 的配置文件:.swcrc,配置的格式为 JSON。

  1.   "jsc": { // 编译规则 
  2.     "target""es5", // 输出js的规范 
  3.     "parser": { 
  4.       // 除了 ecmascript,还支持 typescript 
  5.       "syntax""ecmascript"
  6.       // 是否解析jsx,对应插件 @babel/plugin-transform-react-jsx 
  7.       "jsx"false
  8.       // 是否支持装饰器,对应插件 @babel/plugin-syntax-decorators 
  9.       "decorators"false
  10.       // 是否支持动态导入,对应插件 @babel/plugin-syntax-dynamic-import 
  11.       "dynamicImport"false
  12.       // …… 
  13.       // babel 的大部分插件都能在这里找到对应配置 
  14.     }, 
  15.     "minify": {}, // 压缩相关配置,需要先开启压缩 
  16.   }, 
  17.   "env": { // 编译结果相关配置 
  18.     "targets": { // 编译结果需要适配的浏览器 
  19.       "ie""11" // 只兼容到 ie 11 
  20.     }, 
  21.     "corejs""3" // corejs 的版本 
  22.   }, 
  23.   "minify"true // 是否开启压缩 

babel 的插件系统被 swc 整合成了 jsc.parser 内的配置,基本上大部分插件都能照顾到。而且,swc 还继承了压缩的能力,通过 minify 属性开启,jsc.minify 用于配置压缩相关的规则,更详细的配置可查看文档。

Node APIs

通过在 node.js 代码中,导入 @swc/core 模块,可以在 node.js 中调用 api 直接进行代码的编译,这对 CLI 工具的开发来说是常规操作。

  1. // swc.mjs 
  2. import { readFileSync } from 'fs' 
  3. import { transform } from '@swc/core' 
  4.  
  5. const run = async () => { 
  6.   const code = readFileSync('./source.js''utf-8'
  7.  const result = await transform(code, { 
  8.     filename: "source.js"
  9.   }) 
  10.   // 输出编译后代码 
  11.   console.log(result.code) 
  12.  
  13. run() 

打包代码

除了将代码转义,swc 还提供了一个简易的打包能力。我们新建一个 src 文件夹,在里面新建两个文件:index.js、utils.js。

  1. // src/index.js 
  2. import { log } from './utils.js' 
  3. const start = () => log('app started'
  4. start() 
  1. // src/utils.js 
  2. export const log = function () { 
  3.   console.log(...arguments) 
  4. export const errorLog = function () { 
  5.   console.error(...arguments) 

可以看到 index.js 导入了 utils.js 中的一个方法,然后我们新建一个 spack.config.js 文件,该文件是 swc 打包的配置文件。

  1. // spack.config.js 
  2. module.exports = { 
  3.   entry: { 
  4.     // 打包的入口 
  5.     web: __dirname + "/src/index.js"
  6.   }, 
  7.   output: { 
  8.     // 打包后输出的文件夹 
  9.     path: __dirname + "/dist"
  10.   }, 
  11. }; 

然后在命令行运行:

  1. $ npx spack 

打包成功后,会在 dist 目录输出一个 web.js 文件。

可以看到,不仅将 index.js、utils.js 打包成了一个文件,还进行了 tree shaking,将 utils.js 中没有使用的 errorLog 方法删掉了。

能不能用?

babel 毕竟经过了这么多年的发展,不管是 bug 输了,还是社区活跃度都远远优于 swc。所以,如果是小产品试水还是可以试一下 swc 的,旧项目如果已经使用了 babel 还是不建议进行迁移。

在使用的过程,还是发现了一些小问题。比如,如果我使用了 async function,swc 会自动导入 regenerator-runtime 模块。

  1. // 编译前,有个 async 方法 
  2. const start = async () => { 
  3.   console.log('app started'

调用 swc 编译后,代码如下:

这个结果看起来是没问题的,但是 swc 与 babel 类似,也有 helpers(@swc/helpers),同时提供了 externalHelpers 开关, 如果把 externalHelpers 设置为 true,swc 会将一些工具类,通过模块的形式导入。

  1. // .swcrc 
  2.   "jsc": { 
  3.     "externalHelpers"true 
  4.   } 

而 externalHelpers 的默认值是 false,那这个时候,regenerator-runtime ,到底是通过模块的形式导入,还是把整个代码写入到文件?

swc 正好有个 issue [https://github.com/swc-project/swc/issues/1461] 在讨论这个问题。

除了上面说的这个问题,其实还有一点,就是作者觉得之前的架构有问题,正在加紧重写 2.0 版本,感觉可以期待一下,另外提一句,swc 的作者是一个 97 年的韩国小哥,目前大学都还没毕业,最后我也只能说一句:牛逼!

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. Kubernetes容器平台架构解读
  3. 支付宝 App 集五福版发布:福相伴,五福,马上到!
  4. Windows 11 22526新版修复大量问题!新特性抢先看
  5. WiFi7有多强?比WiFi6高三倍,速度快如飞
  6. Python再获年度编程语言,微软或成最大赢家

 

来源:自然醒的笔记本内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯