[Rust] 初步认识 swc

0. 背景

swc 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器,类似于 babel。

对比 babel,swc 有至少 10 倍以上的性能优势,
Performance comparison of swc and babel

对比 babel 的 plugin 体系,swc 支持的特性还有待增强,
Comparison with babel

下文总结了一下我对 swc 项目的初步认识。

1. Rust 项目

Rust 是一个无 GC(垃圾回收) 的高性能编程语言。
关于这门语言本身,就不再详述了。

下面简单罗列下,Rust 语言跟 swc 相关的知识点。

(1)rustup 和 cargo
rustup,Rust 语言的安装器,安装了才可用
rustup 会自动安装 cargo 命令行工具。

(2)初始化
cargo 是 Rust 语言的:脚手架工具 + 构建工具 + 包管理器。

$ cargo new hello-rust  # 脚手架

生成的目录结构如下,

hello-rust
├── .gitignore
├── Cargo.toml
└── src
    └── main.rs

其中,Cargo.toml 中包含了 Rust 项目相关的配置信息,

[package]
name = "hello-rust"
version = "0.1.0"
authors = ["..."]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]

[dependencies] 用于配置外部依赖,包管理平台 crate.io

src/main.js 中是 Rust 代码,

fn main() {
    println!("Hello, world!");
}

(3)构建和运行

$ cargo build
$ cargo run

(4)一些知识点
Rust 项目编译单元称为 crate,一个 crate 可以是一个 binary 或 library。
对比其他编程语言,是指编译产物为可执行文件(binary),还是代码库(library)。

详细可参考这里:
The Rust Programming Language: Packages and Crates

Rust 的部署单元称为 package,一个 package 可以由一个或多个 crate 组成。
cargo 创建的每个 package 都有一个 Cargo.toml 文件。

package 可包含 crate 的数量:>=1
package 可包含 binary crate 的数量:>=0
package 可包含 library crate 的数量:0, 1

下面是一些目录约定:

  • cargo 默认将 src/main.rs 作为 binary crate 的入口
  • cargo 默认将 src/lib.rs 作为 library crate 的入口
  • 如果需要构建出多个 binary crate,则分为多个文件写到 src/bin/ 目录中

2. neon

swc/package.json 中的 scripts.build 配置如下,

{
  ...,
  "scripts": {
    ...,
    "build": "tsc -d && neon build --release"
  },
  ...
}

表明 swc v1.2.9 使用了 neon 进行打包。

neon 是一个为 Node.js 打包 Rust 扩展的工具。
我们按官方的 README 来简单试用下。

(1)脚手架

$ npm install -g neon-cli
$ neon new my-project

会生成这些文件:

my-project
├── .gitignore
├── README.md
├── lib
│   └── index.js
├── native
│   ├── Cargo.toml
│   ├── build.rs
│   └── src
│       └── lib.rs
└── package.json

其中 lib/index.js 是 Node.js 代码,

var addon = require('../native');  // 引用 Node.js 扩展
console.log(addon.hello());

native/src/lib.rs 是一个 Rust 库,将打包为 Node.js 扩展,

use neon::prelude::*;

fn hello(mut cx: FunctionContext) -> JsResult<JsString> {
    Ok(cx.string("hello node"))
}

register_module!(mut cx, {
    cx.export_function("hello", hello)
});

(2)打包
package.json 中配置了 scripts.installneon build

{
  ...,
  "dependencies": {
    "neon-cli": "^0.4.0"
  },
  "scripts": {
    "install": "neon build"
  }
}

因此,只要我们安装依赖,就自动进行打包了(安装依赖后自动执行 npm run install),

$ npm i

(3)构建结果
native/ 目录下会多了很多 rust 构建产物,

my-project
├── .gitignore
├── README.md
├── lib
│   └── index.js
├── native
│   ├── Cargo.lock      <- 新增
│   ├── Cargo.toml
│   ├── artifacts.json  <- 新增
│   ├── build.rs
│   ├── index.node      <- 新增(Node.js 扩展)
│   ├── src
│   │   └── lib.rs
│   └── target          <- 新增
│       ├── .rustc_info.json
│       └── debug
├── package-lock.json
└── package.json

其中,native/index.node 就是打包好的 Node.js 扩展了。

3. Node.js 中调用 swc

有了 neon 之后,在 Node.js 中调用 swc 就变得简单多了,

$ npm i -D @swc/core @swc/cli

只需要像安装其他 npm 模块一样安装 swc 就行了。

具体可参考 swc 使用文档 ,这里就不再详述了。

4. Rust 中直接调用 swc crate

为了了解 swc 内部原理,我们需要 debug 进 swc 源码中。
下面我们来看一下,怎么做到这些。

(1)新建一个 debug-swc 项目

$ cargo new debug-swc
$ cd debug-swc

目录结构如下,

debug-swc
├── .gitignore
├── Cargo.toml
└── src
    └── main.rs

(2)添加依赖
Cargo.toml 文件,[dependencies] 配置项下面添加如下内容,

swc_ecma_parser = "0.31.2"
swc_common = "0.7.0"
swc_ecma_ast = "0.26.0"
swc_atoms = "0.2.2"

(3)新增 test.js 文件
根目录下的这个文件,用于 debug swc 的解析之用,内容如下,

const i = 1;

(4)编写 src/main.rs
官方例子 Crate: swc_ecma_parser 几乎不用做任何修改。

为了能展示 swc 解析 JavaScript 代码的结果,
我增加了一个 get_identifier_name 函数,用于获取 test.js 代码中的变量名 i

fn get_identifier_name(module: &Module) -> Result<&JsWord, ()> {
    for module_item in &module.body {
        if let ModuleItem::Stmt(Stmt::Decl(Decl::Var(var))) = module_item {
            for decl in &var.decls {
                if let Pat::Ident(identifier) = &decl.name {
                    return Ok(&identifier.sym);
                }
            }
        }
    }
    Err(())
}

src/main.rs 的完整源码可以看这里:github: debug-swc/src/main.rs

(4)来看一下执行结果

$ cargo run

执行 cargo run 会先进行 cargo build,最终结果如下,


我们经过解析 AST 从 test.js 源码中拿到了变量名 i

下面我们来看看调试。

(5)添加 VSCode 调试配置 .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "debug swc",
          "type": "lldb",
          "request": "launch",
          "program": "${workspaceRoot}/target/debug/debug-swc",
          "args": [],
          "cwd": "${workspaceRoot}",
      }
  ]
}

注:
在成功启动调试之前,遇到了两个问题:

这是因为 rustup 安装时,将环境变量写到了 ~/.bash_profile 中。

export PATH="$HOME/.cargo/bin:$PATH"

~/.bash_profile 中的设置,是在电脑重启后,而不是终端重启后生效。
所以即使在终端执行了 source ~/.bash_profile,终端里生效了,
VSCode 仍然无法读到 rustup。

解决方案是重启电脑就好了。

VSCode Rust Extension 讨论区相关的 issue 如下:rustup not available

此时,我们可以到 github vscode-lldb release 中下载安装包:vscode-lldb v1.5.3 codelldb-x86_64-darwin.vsix

然后在 VSCode 中选择从 .vsix 文件安装扩展就行了。


(6)启动调试
我们在编译完成之后,在 src/main.rs 中打个断点,按 F5 启动调试。

其中 module 就是 parser.parse_module() 之后得到的 AST 了。
同样我们可以在 let module = parser\n 这一行打个断点,

然后单步调试到 swc-ecma-parser 里面,位于 github: swc v1.2.10/ecmascript/parser/src/parser/mod.rs#L122

5. 总结

本文介绍了我对 swc 项目的初步认识。
其中涉及到了以下几方面的内容:

  • Rust:rustup、cargo、crate
  • neon:Node.js addon
  • swc-ecma-parser
  • VSCode debug rust

参考

swc
swc v1.2.9
Performance comparison of swc and babel
Comparison with babel
Rust
rustup
crate.io
The Rust Programming Language: Packages and Crates
neon
Crate: swc_ecma_parser
rustup not available
VSCode: Rust Extension
VSCode: CodeLLDB Extension
github: debug-swc

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,226评论 6 524
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,509评论 3 405
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,523评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,181评论 1 302
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,189评论 6 401
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,642评论 1 316
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,993评论 3 431
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,977评论 0 280
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,527评论 1 326
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,547评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,661评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,250评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,991评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,422评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,571评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,241评论 3 382
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,737评论 2 366