swc,babel的代替者?

3,101 阅读3分钟

babel

这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战

image.png

Babel是一个工具链或者说babeljavaScript编译器,主要用于将ECMAScript 2015+代码转换为当前和旧的浏览器或环境中的向后兼容的JavaScript版本。官网列出了几个babel主要的功能:

  • 语法转换
  • Polyfill我们的代码让它可以在目标浏览器环境下运行
  • 源代码转换
  • ... babel是一个由JavaScript编写的用于解析js代码的工具,Github地址github.com/babel/babel ,目前我们的前端项目大多是通过Webpack打包工具来构建我们的代码,像目前所流行使用的React使用了JSX语法来开发组件、页面,而JSX语法是同时包含了html的模板字符串以及javaScript代码,这样直接加载在浏览器中是不能被识别运行的,于是需要一个工具来将他转换为浏览器可识别的代码如:javaScript

Vue为了也使用了babel工具来编译源代码。babel的核心模块只有三个模块,这三个模块分别是babel/corebabel/parserbabel/generator。首先是core内核主要负责整体编译流程运转以及提供runtime,而parser则是core内部将代码转换为AST的工具,这里面会经过语法分析、词法分析等。而最后的generator负责将AST再解析为可以为浏览器运行的javaScript代码,这样一个babel流程就算完成。

babel插件

如果仅仅是可以编译我们的javaScript代码,那babel并不能满足目前前端工程化的需求,我们的日常开发中为了方便写css样式,还会使用scssless等css预处理器来加强开发体验,同时有些css属性可能也会面临浏览器的版本兼容问题,这样我们精心制作的页面效果可能在一些旧的浏览器版本上使用体验会大打折扣,于是babel在设计之初就以高内聚性以及微内核的原则设计,除了babel核心以外的功能都可以通过babel插件来实现,通过开发不同的插件也让babel的功能变得丰富。

swc

image.png 由于前端项目的复杂化,我们通常需要webpack的插件打包我们的代码同时又需要不少babel的插件来编译我们的代码,这就造成了我们的编译时间变长,其次由于babel是由javaScript语言所开发,所以存在一些性能问题。

于是新的编译工具便出现了:swc,根据官方测试,swc 对比 babel,swc 有至少 10 倍以上的性能优势why should you use swcswc是一个基于rust语言开发的js编译器,利用了rust的安全无gc以及系统级语言的特性,保证了性能是接近原生开发,并且可以充分利用多核cpu,同时利用rust做jsbinding,减少了bug的出现。 swc 是基于 neon 做的 JS binding,后来由于 N-API 发布,swc 就切换到了 napi-rsgithub.com/napi-rs/nap…,迁移之后 swc JS plugin 的性能提升了不少。在前不久Next.js已经宣布了使用swc作为编译工具,相信在不久的将来,swc会在前段工程化领域绽放光彩。