swc plugin hello world

jgrass

发布于 2024-12-25 18:03:08

7900

代码可运行

文章被收录于专栏：蔻丁杂记蔻丁杂记

运行总次数：0

代码可运行

照搬官网案例，实现 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;