[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 {
    Ok(cx.string("hello node"))
}

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

（2）打包
package.json 中配置了 scripts.install 为 neon 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}",
      }
  ]
}

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

VSCode 安装 Rust Extension 时，提示找不到 rustup。

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

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

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

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

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

要完成调试，还需要安装 VSCode CodeLLDB Extension 可是一直下载不了。

此时，我们可以到 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