待入门的SWCSpeedy Web Compiler 基于Rust语言的JS编译器(Javascript Compile

前情提要

1. rust 是什么

一种编程语言，一度被赋予是c++/c语言的替代品

支持函数式，面向对象编程

2. 编译器的基本工作流程

三个阶段：解析、转换、代码生成

解析：将原始代码(字符) -> 词法分析 -> 令牌 -> 语法分析 -> 抽象语法树（AST）

转换：处理抽象语法树（AST）-> 转换器 -> 新的语法树（AST）

代码生成：将处理后的新的语法树（AST）-> 新的代码(字符)

SWC为什么会诞生

既生瑜何生亮

swc被推崇，除了大众追捧外，也一定程度上说明babel 存在一些不太容易提升的地方。如社区所言：

语言劣势，用JS写的babel 不能用多核cpu处理编译任务链

“这其中转换为AST以及编译成字节码应该是最耗费性能的”

SWC是什么

Speedy Web Compiler

基于Rust语言的JS编译器(Javascript Compiler），其生态周边中包含压缩插件、打包工具spack

主要对标Babel，誓言要代替Babel （据说：转译性能比Babel快20倍）

核心API

1. swc_ecma_parser 获得AST结构

 **Rust版本**
 // 声明swc文件对象
 let fm = cm.new_source_file(
    FileName::Custom("test.js".into()), // 文件名
    "function foo() { console.log('foo')}".into(), // 文件里具体的代码
 );
 
// 声明 词法分析Lexer解析规则 
let lexer = Lexer::new(
    Syntax::Es(Default::default()),
    EsVersion::Es2016,
    StringInput::from(&*fm), // fm 里的代码
    None,
);

// 声明Parser对象
let capturing = Capturing::new(lexer);
let mut parser = Parser::new_from(capturing);

// 在JS中每个文件一般是一个Module 
let mut module = parser.parse_module();



**JS版本**
async parse(src: string, options?: ParseOptions, filename?: string): Promise<Program> {
    options = options || { syntax: "ecmascript" };
    options.syntax = options.syntax || "ecmascript";
    
    if (bindings) {
      const res = await bindings.parse(src, toBuffer(options), filename);
      return JSON.parse(res);
    }

一般得到的ast树形结构如下，与babel类似：

2. swc_ecma_transform 转换AST

 Rust版本
 // 遍历ast body体
 for item in module.body {
    // 当前的引用值与item匹配时，把item ref赋值给 var
    if let ModuleItem::ModuleDecl(ModuleDecl::Import(var)) = item {
        let source = &*var.src.value;
        if source == "antd" {
            for specifier in &var.specifiers {
                match specifier {
                    ImportSpecifier::Named(ref s) => {
                        let ident = format!("{}", s.local.sym);
                        specifiers.push(format!("antd/es/{}/style/index.css", ident.to_lowercase()));
                    }
                    ImportSpecifier::Default(ref s) => {}
                    ImportSpecifier::Namespace(ref ns) => {}
                }
            }
         }
    }
 
 
 JS版本
 transformSync(src, options) {
   const { plugin } = options, newOptions = __rest(options, ["plugin"]);
   // 是否有plugin
    if (plugin) {
        const m = typeof src === "string" ? this.parseSync(src, (_c = options === null || options === void 0 ? void 0 : options.jsc) === null || _c === void 0 ? void 0 : _c.parser, options.filename) : src;
        return this.transformSync(plugin(m), newOptions);
    }
   return bindings.transformSync(isModule ? JSON.stringify(src) : src, isModule, toBuffer(newOptions));
 }
 
 function loadBinding(dirname, filename = 'index', packageName) {  
    // 获取系统信息
    const triples = triples_1.platformArchTriples[PlatformName][ArchName];
    
    // 遍历信息
    for (const triple of triples) {
        if (packageName) {
            try {
                // 获取到需要加载的二进制文件路径
                // /Users/xx/swc-demo/node_modules/@swc/core-darwin-x64/swc.darwin-x64.node
                return require(
                  require.resolve(
                    `${packageName}-${triple.platformArchABI}`,
                    { paths: [dirname] }
                  ));
            }
        }
    }
}

依旧用上面的例子尝试一下：

可以得到以下结果：

"[\n    1,\n    2,\n    3\n].map(function(i) {\n    return i + 1;\n});\n"

这里没有像我们理解的编译器中的三阶段，就直接可以得到新的代码段。

与babel相似点：

在traverse转换ast过程中，都会基于helpers、plugins/preset 的规则进行转换
plugins和preset的执行顺序一致

与babel 的不同点：

没有类似 @babel/generator 生成新代码，transform 阶段就可以生成。

// 声明compiler对象
let compiler = Compiler::new(fm.clone());

//生成新的ast
let mut newmodule = module.clone() as Module;

//调用Compile对象的print方法生成新的代码
let new_res = compiler.print(&newmodule,
EsVersion::Es2016,
...args).unwrap();

visitor对象中没有enter/exit 钩子，由顶层的 visitProgram 往内递归执行节点访问操作。（看源码中被注释掉了，可能未来会支持）

面向js 生态的插件系统

与babel类似，swc/core也暴露一些api给开发者，可以自定义转换代码的插件。但官网提到目前有些性能问题。

可能的后续

如何在项目中合理化配置swc
如何开发一个swc插件

转转研发中心及业界小伙伴们的技术学习交流平台，定期分享一线的实战经验及业界前沿的技术话题。关注公众号「转转技术」（综合性）、「大转转FE」（专注于FE）、「转转QA」（专注于QA），更多干货实践，欢迎交流分享~

待入门的SWC

前情提要

SWC为什么会诞生

SWC是什么

相关应用形式

@swc/cli 通过命令行调用

swc-loader

@swc/core