Skip to content

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 国际」 许可协议进行许可,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。