待入门的SWC

最新推荐文章于 2025-02-26 14:39:33 发布

大转转FE

最新推荐文章于 2025-02-26 14:39:33 发布

阅读量3.5k

点赞数 1

文章标签：编译器 java vue js python

本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/126534955

版权

SWC是一个基于Rust的JS编译器，旨在替代Babel，提供更快的转译性能。它包含了CLI、loader和核心API，用于与webpack和其它构建工具集成。尽管在某些场景下swc-loader的性能不如babel-loader，但其核心API提供了直接转换AST的能力，且允许开发者创建自定义插件。未来，如何优化配置和开发插件将是值得关注的方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前情提要

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();