swc plugin hello world

照搬官網案例，實現 swc 插件的 hello world

準備工作

• 安裝 rust
• 準備一個空目錄（e.g. swc-demo），執行 pnpm init 初始化
• 安裝 @swc/cli @swc/core，pnpm i -D @swc/cli @swc/core

此時就可以測試一下 swc 了，創建 source.js ，隨便寫點 ES6 代碼，然後運行 npx swc ./source.js -o dist.js
一切正常的話，會得到編譯之後的 dist.js 文件

以上內容見文檔：@swc/cli – SWC

• 使用 .swcrc 來配置 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;

https://www.cnblogs.com/jasongrass/p/17746316.html

參考

官方案例：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