swc plugin hello world

Published: at 14:53

照搬官网案例，实现 swc 插件的 hello world

准备工作

此时就可以测试一下 swc 了，创建 source.js ，随便写点 ES6 代码，然后运行 npx swc ./source.js -o dist.js
一切正常的话，会得到编译之后的 dist.js 文件

以上内容见文档：@swc/cli – SWC

配置见文档：Configuring SWC – SWC

以下是为了说明如何在 .swcrc 文件中配置插件，省略了很多其它配置。

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "ecmascript"
    },
    "target": "es2015",
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  },
  "minify": false
}

注意到，插件配置在 jsc -> experimental -> plugins 中，如果使用已经发布的插件，需要先安装，再在 swcrc 文件中配置。

如上面的 @swc/plugin-styled-components， 先试用 pnpm add -D @swc/plugin-styled-components 进行安装。

文档：@swc/plugin-styled-components - npm

此时再运行 npx swc ./source.js -o dist.js，就会使用 .swcrc 文件中的配置，并加载插件了。

swc 插件开发

文档：Implementing a plugin – SWC

首先使用 cargo 安装 swc_cli, cargo install swc_cli,
找一个文件夹，执行 swc plugin new --target-type wasm32-wasi my-first-plugin 创建插件项目
并执行 rustup target add wasm32-wasi 设置编译目标。

此时便得到了一个 swc 插件开发的 rust 项目。

实现官网的例子，修改 lib.rs 文件

use swc_core::plugin::{plugin_transform, proxies::TransformPluginProgramMetadata};
use swc_core::{
    common::Spanned,
    ecma::{
        ast::{op, BinExpr, Ident, Program},
        transforms::testing::test,
        visit::{as_folder, FoldWith, VisitMut, VisitMutWith},
    },
};


pub struct TransformVisitor;


impl VisitMut for TransformVisitor {
    fn visit_mut_bin_expr(&mut self, e: &mut BinExpr) {
        e.visit_mut_children_with(self);


        if e.op == op!("===") {
            e.left = Box::new(Ident::new("kdy1".into(), e.left.span()).into());
        }
    }
}


#[plugin_transform]
pub fn process_transform(program: Program, _metadata: TransformPluginProgramMetadata) -> Program {
    program.fold_with(&mut as_folder(TransformVisitor))
}


test!(
    Default::default(),
    |_| as_folder(TransformVisitor),
    boo,
    r#"foo === bar;"#,
    r#"kdy1 === bar;"#
);

然后运行 cargo test，执行测试，应该能够通过。

运行 cargo build-wasi --release 构建 release 发布文件。
然后就可以在 target\wasm32-wasi\release 目录下，找到 my-first-plugin.wasm 文件。拷贝这个文件的绝对路径，

在上面的 swc-demo 项目的 .swcrc 文件中，增加这个插件的配置：

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "ecmascript"
    },
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ],
        [
          "C:\\Users\\jgrass\\Desktop\\practice\\swc\\my-first-plugin\\target\\wasm32-wasi\\release\\my_first_plugin.wasm",
          {}
        ]
      ]
    }
  },
  "minify": false
}

然后在 source.js 文件中，添加一行代码 foo === bar;, 运行 npx swc ./source.js -o dist.js，就会在 dist.js 这个输出文件中，看到被修改之后的 kdy1 === bar;

参考

官方案例：swc-project/plugins: Plugins for swc, written in rust

前端Rust开发WebAssembly与Swc插件快速入门_rust开发前端-CSDN博客
待入门的SWC - 掘金
关于swc,你想知道的全都有！ - 掘金
xxXyh1908/swc-plugin-transform-vue3-jsx: SWC plugin for transform Vue3-jsx syntax

原文链接: https://blog.jgrass.cc/posts/swc-plugin-hello-world/

本作品采用 「署名 4.0 国际」 许可协议进行许可，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。