babel
这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战
Babel
是一个工具链或者说babel
是javaScript
编译器,主要用于将ECMAScript 2015+
代码转换为当前和旧的浏览器或环境中的向后兼容的JavaScript
版本。官网列出了几个babel
主要的功能:
- 语法转换
- Polyfill我们的代码让它可以在目标浏览器环境下运行
- 源代码转换
- ...
babel
是一个由JavaScript
编写的用于解析js代码的工具,Github地址github.com/babel/babel ,目前我们的前端项目大多是通过Webpack
打包工具来构建我们的代码,像目前所流行使用的React
使用了JSX
语法来开发组件、页面,而JSX
语法是同时包含了html
的模板字符串以及javaScript
代码,这样直接加载在浏览器中是不能被识别运行的,于是需要一个工具来将他转换为浏览器可识别的代码如:javaScript
。
而Vue
为了也使用了babel
工具来编译源代码。babel
的核心模块只有三个模块,这三个模块分别是babel/core
、babel/parser
、babel/generator
。首先是core
内核主要负责整体编译流程运转以及提供runtime
,而parser
则是core
内部将代码转换为AST
的工具,这里面会经过语法分析、词法分析等。而最后的generator
负责将AST
再解析为可以为浏览器运行的javaScript
代码,这样一个babel
流程就算完成。
babel插件
如果仅仅是可以编译我们的javaScript
代码,那babel
并不能满足目前前端工程化的需求,我们的日常开发中为了方便写css
样式,还会使用scss
、less
等css预处理器来加强开发体验,同时有些css属性可能也会面临浏览器的版本兼容问题,这样我们精心制作的页面效果可能在一些旧的浏览器版本上使用体验会大打折扣,于是babel
在设计之初就以高内聚性以及微内核的原则设计,除了babel
核心以外的功能都可以通过babel
插件来实现,通过开发不同的插件也让babel的功能变得丰富。
swc
由于前端项目的复杂化,我们通常需要webpack
的插件打包我们的代码同时又需要不少babel
的插件来编译我们的代码,这就造成了我们的编译时间变长,其次由于babel
是由javaScript
语言所开发,所以存在一些性能问题。
于是新的编译工具便出现了:swc,根据官方测试,swc
对比 babel
,swc 有至少 10 倍以上的性能优势why should you use swc。swc
是一个基于rust
语言开发的js
编译器,利用了rust
的安全无gc以及系统级语言的特性,保证了性能是接近原生开发,并且可以充分利用多核cpu,同时利用rust做js
binding,减少了bug的出现。
swc 是基于 neon 做的 JS binding,后来由于 N-API 发布,swc 就切换到了 napi-rs
github.com/napi-rs/nap…,迁移之后 swc JS plugin
的性能提升了不少。在前不久Next.js
已经宣布了使用swc
作为编译工具,相信在不久的将来,swc会在前段工程化领域绽放光彩。