Rust ECMAScript 3兼容库swc_ecma_compat_es3的使用

介绍

swc_ecma_compat_es3是SWC(Rust编写的超快速TypeScript/JavaScript编译器)生态系统中的一个库，专门用于将现代JavaScript代码转换为兼容ECMAScript 3(ES3)标准的代码。这对于需要支持老旧浏览器(如IE8及更早版本)的项目特别有用。

该库能够处理现代JavaScript特性如箭头函数、const/let声明、类等，并将它们转换为ES3兼容的等效代码。

使用方法

基本使用

首先在Cargo.toml中添加依赖：

[dependencies]
swc_ecma_compat_es3 = "0.123"  # 请使用最新版本

然后可以在Rust代码中使用：

use swc_ecma_compat_es3::es3;
use swc_ecma_ast::*;
use swc_ecma_parser::{Parser, StringInput, Syntax};
use swc_ecma_codegen::text_writer::JsWriter;
use swc_ecma_visit::FoldWith;

fn main() {
    // 1. 解析JavaScript代码
    let code = r#"
        const greet = (name) => {
            return `Hello, ${name}!`;
        };
        
        class Person {
            constructor(name) {
                this.name = name;
            }
        }
    "#;
    
    let mut parser = Parser::new(
        Syntax::Es(Default::default()),
        StringInput::new(code, Default::default(), Default::default()),
        None,
    );
    
    let module = parser.parse_module().unwrap();
    
    // 2. 转换为ES3兼容代码
    let transformed = module.fold_with(&mut es3());
    
    // 3. 生成转换后的代码
    let mut buf = vec![];
    {
        let mut emitter = swc_ecma_codegen::Emitter {
            cfg: Default::default(),
            cm: Default::default(),
            wr: JsWriter::new(Default::default(), "\n", &mut buf, None),
            comments: None,
        };
        emitter.emit_module(&transformed).unwrap();
    }
    
    let output = String::from_utf8(buf).unwrap();
    println!("{}", output);
}

作为SWC插件使用

你也可以将swc_ecma_compat_es3作为SWC的插件使用：

use swc::{
    config::{Options, TransformConfig},
    try_with_handler, Compiler,
};
use swc_common::{FileName, FilePathMapping, SourceMap};

fn main() {
    let cm = Arc::new(SourceMap::new(FilePathMapping::empty()));
    let c = Compiler::new(cm.clone());
    
    let code = "..."; // 你的现代JavaScript代码
    
    try_with_handler(cm.clone(), false, |handler| {
        let fm = cm.new_source_file(FileName::Anon, code.into());
        
        c.process_js_with_custom_pass(
            fm,
            None,
            handler,
            &Options {
                swcrc: false,
                is_module: true,
                output_path: None,
                config: TransformConfig {
                    jsc: Default::default(),
                    ..Default::default()
                },
                ..Default::default()
            },
            |_| es3(),
        )
    })
    .unwrap();
}

转换示例

输入代码(现代JavaScript)

const add = (a, b) => a + b;

class Calculator {
    constructor() {
        this.value = 0;
    }
    
    increment() {
        this.value += 1;
    }
}

let result = add(5, 3);
const calc = new Calculator();
calc.increment();

转换后的ES3兼容代码

var add = function(a, b) {
    return a + b;
};

var Calculator = (function() {
    function Calculator() {
        this.value = 0;
    }
    
    Calculator.prototype.increment = function() {
        this.value += 1;
    };
    
    return Calculator;
})();

var result = add(5, 3);
var calc = new Calculator();
calc.increment();

支持的转换特性

1. 箭头函数 → 转换为传统函数表达式
2. const/let → 转换为var声明
3. 类 → 转换为原型继承模式
4. 模板字符串 → 转换为字符串连接
5. 默认参数 → 转换为条件检查
6. 剩余参数 → 转换为arguments对象处理
7. 展开运算符 → 转换为apply调用

注意事项

1. 某些现代特性(如Promise、async/await)无法完全转换为ES3代码，因为它们需要运行时支持
2. 转换后的代码可能会比原始代码更冗长
3. 性能优化可能需要手动调整转换后的代码
4. 建议在转换后运行充分的测试，确保功能一致性

通过使用swc_ecma_compat_es3，你可以轻松地将现代JavaScript项目降级到ES3标准，同时保持代码的可维护性和开发效率。

完整示例demo

以下是一个完整的示例，展示如何使用swc_ecma_compat_es3将现代JavaScript代码转换为ES3兼容代码：

use std::sync::Arc;
use swc_ecma_compat_es3::es3;
use swc_ecma_ast::*;
use swc_ecma_parser::{Parser, StringInput, Syntax};
use swc_ecma_codegen::text_writer::JsWriter;
use swc_ecma_visit::FoldWith;
use swc_common::{SourceMap, FileName};

fn main() {
    // 1. 准备要转换的现代JavaScript代码
    let modern_js = r#"
        // 箭头函数
        const square = (x) => x * x;
        
        // 类定义
        class Rectangle {
            constructor(width, height) {
                this.width = width;
                this.height = height;
            }
            
            area() {
                return this.width * this.height;
            }
        }
        
        // 模板字符串
        const desc = `Rectangle area is ${new Rectangle(5, 4).area()}`;
    "#;
    
    // 2. 初始化源代码映射
    let cm = Arc::new(SourceMap::default());
    
    // 3. 创建源代码文件
    let fm = cm.new_source_file(FileName::Anon, modern_js.into());
    
    // 4. 解析JavaScript代码
    let mut parser = Parser::new(
        Syntax::Es(Default::default()),
        StringInput::from(&*fm),
        None,
    );
    
    let module = match parser.parse_module() {
        Ok(module) => module,
        Err(err) => {
            eprintln!("解析错误: {}", err);
            return;
        }
    };
    
    // 5. 应用ES3转换
    let transformed = module.fold_with(&mut es3());
    
    // 6. 生成转换后的代码
    let mut buf = Vec::new();
    {
        let mut emitter = swc_ecma_codegen::Emitter {
            cfg: Default::default(),
            cm: cm.clone(),
            wr: JsWriter::new(cm.clone(), "\n", &mut buf, None),
            comments: None,
        };
        
        if let Err(err) = emitter.emit_module(&transformed) {
            eprintln!("代码生成错误: {}", err);
            return;
        }
    }
    
    // 7. 输出转换结果
    match String::from_utf8(buf) {
        Ok(output) => {
            println!("转换后的ES3兼容代码:");
            println!("{}", output);
        }
        Err(err) => {
            eprintln!("UTF-8转换错误: {}", err);
        }
    }
}

转换结果示例

运行上述代码后，你将得到类似以下的ES3兼容代码：

var square = function(x) {
    return x * x;
};

var Rectangle = (function() {
    function Rectangle(width, height) {
        this.width = width;
        this.height = height;
    }
    
    Rectangle.prototype.area = function() {
        return this.width * this.height;
    };
    
    return Rectangle;
})();

var desc = "Rectangle area is " + new Rectangle(5, 4).area();

这个完整示例展示了从解析现代JavaScript代码到生成ES3兼容代码的完整流程，包含了错误处理等实际开发中需要考虑的细节。