JS `ESBuild` / `SWC` `Plugin API` 深度：构建自定义转换与优化

各位老铁，大家好！今天咱来聊聊JS打包界两大狠角色：ESBuild和SWC，以及它们那深不见底的Plugin API。别怕，听我慢慢道来，保证让你们听完之后，也能撸起袖子自己写插件，给代码做个全身SPA，性能直接起飞！

啥是ESBuild和SWC？为啥要用Plugin API？

简单来说，ESBuild和SWC就是JS打包工具，负责把你的代码“打包”成浏览器可以理解的样子。它们速度快到飞起，比老牌的Webpack不知道高到哪里去了。

ESBuild: 用Go语言写的，以快著称，适合快速构建项目。
SWC: 用Rust语言写的，同样以快著称，而且对TypeScript支持更好。

那Plugin API是干啥的呢？想象一下，ESBuild和SWC是两台强大的机器，但它们只能做一些基本的事情。你想让它们做更复杂的事情，比如：

代码转换: 把你的代码转换成另一种形式，比如把新的语法转换成老的语法，或者把一种代码风格转换成另一种代码风格。
代码优化: 优化你的代码，比如删除无用的代码，或者把代码压缩得更小。
自定义处理: 做一些自定义的处理，比如生成一些额外的文件，或者修改一些配置。

这时候，就需要Plugin API了。你可以通过Plugin API来告诉ESBuild和SWC，你想让它们做什么。

ESBuild Plugin API：简单粗暴就是快！

ESBuild的Plugin API相对简单，主要是围绕setup函数展开。咱们先看个例子，一个简单的插件，用来在每个JS文件顶部插入一行注释：

const myPlugin = {
  name: 'my-plugin',
  setup(build) {
    build.onLoad({ filter: /.js$/ }, async (args) => {
      const fs = require('fs');
      const path = require('path');
      const filePath = args.path;
      const originalCode = await fs.promises.readFile(filePath, 'utf8');
      const newCode = `// This file is processed by my-plugin!n${originalCode}`;
      return {
        contents: newCode,
        loader: 'js',
      };
    });
  },
};

module.exports = myPlugin;

name: 插件的名字，随便起一个。
setup(build): 这是插件的核心函数，ESBuild会把一个build对象传给你，你可以用这个对象来注册各种钩子。
build.onLoad({ filter: /.js$/ }, ...): 这是注册一个onLoad钩子，意思是当ESBuild加载.js文件的时候，就会调用你提供的函数。
- filter: 一个正则表达式，用来匹配需要处理的文件。
- async (args) => ...: 这个函数就是用来处理文件的。
  - args: 包含文件信息的对象，比如文件路径。
  - contents: 你需要返回处理后的文件内容。
  - loader: 你需要指定文件的类型，比如js。

怎么用这个插件呢？

// esbuild.config.js
const myPlugin = require('./my-plugin');

require('esbuild').build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [myPlugin],
}).catch(() => process.exit(1));

在esbuild.config.js文件中，把你的插件加到plugins数组里就行了。

ESBuild Plugin API的常用钩子：

钩子	作用	参数	返回值
`onStart`	在构建开始的时候调用	无	无
`onEnd`	在构建结束的时候调用	`result: { errors: [], warnings: [] }`	无
`onResolve`	在解析模块路径的时候调用	`path: string, importer: string, resolveDir: string, kind: ResolveKind`	`{ path: string, namespace?: string, external?: boolean }` 或者 `null`
`onLoad`	在加载模块内容的时候调用	`path: string, namespace: string, suffix: string, pluginData: any`	`{ contents: string \| Uint8Array, loader: Loader, resolveDir?: string, pluginData?: any, errors?: [], warnings?: [] }` 或者 `null`

onResolve钩子：解决模块路径问题

onResolve钩子可以用来修改模块的解析路径。比如，你可以用它来实现别名，或者把一些模块重定向到其他地方。

const path = require('path');

const aliasPlugin = {
  name: 'alias-plugin',
  setup(build) {
    build.onResolve({ filter: /^@components// }, (args) => {
      return {
        path: path.resolve(__dirname, 'src/components', args.path.replace(/^@components//, '')),
      };
    });
  },
};

module.exports = aliasPlugin;

这个插件把所有以@components/开头的模块路径，都重定向到src/components目录下。

onLoad钩子：加载模块内容

onLoad钩子可以用来修改模块的内容。比如，你可以用它来把CSS文件转换成JS文件，或者把Markdown文件转换成HTML文件。

const fs = require('fs');
const marked = require('marked');

const markdownPlugin = {
  name: 'markdown-plugin',
  setup(build) {
    build.onLoad({ filter: /.md$/ }, async (args) => {
      const filePath = args.path;
      const markdownContent = await fs.promises.readFile(filePath, 'utf8');
      const htmlContent = marked.parse(markdownContent);
      return {
        contents: `export default `${htmlContent}`;`,
        loader: 'js',
      };
    });
  },
};

module.exports = markdownPlugin;

这个插件把所有的.md文件转换成JS文件，JS文件导出一个包含HTML内容的字符串。

SWC Plugin API：Rust大法好！

SWC的Plugin API相对复杂一些，因为它需要你用Rust来写插件。但是，如果你熟悉Rust，你会发现SWC的Plugin API更加强大，可以做更多的事情。

SWC Plugin的架构：

SWC插件主要由两部分组成：

Rust Core: 这是插件的核心逻辑，用Rust编写。
JavaScript Wrapper: 这个Wrapper用来加载和配置Rust Core，并暴露给SWC使用。

一个简单的SWC插件例子：

1. Rust Core (src/lib.rs):

use swc_core::{
    ecma::{
        ast::{Expr, Ident, Lit, Module, Program, Str, VarDeclKind},
        visit::{noop_visit_mut_type, VisitMut, VisitMutWith},
    },
    plugin::{plugin_transform, proxies::TransformVisitor, errors::Error},
};

pub struct MyVisitor;

impl VisitMut for MyVisitor {
    noop_visit_mut_type!();

    fn visit_mut_ident(&mut self, ident: &mut Ident) {
        if ident.sym.to_string() == "console" {
            ident.sym = "myConsole".into();
        }
    }
}

#[plugin_transform]
pub fn process_transform(program: Program, _metadata: ()) -> Result<Program, Error> {
    let mut visitor = MyVisitor;
    let mut program = program;
    program.visit_mut_with(&mut visitor);
    Ok(program)
}

这个Rust代码定义了一个Visitor，它会遍历AST（抽象语法树），把所有的console替换成myConsole。

2. JavaScript Wrapper (index.js):

const path = require('path');

module.exports = function (pluginOptions) {
  return {
    name: 'swc-plugin-example',
    transform(program) {
      const { transformSync } = require('@swc/core');
      const { code } = transformSync(program, {
        jsc: {
          parser: {
            syntax: 'ecmascript',
            jsx: false,
          },
          transform: {
            plugin: [
              [
                path.join(__dirname, 'target/wasm32-wasi/debug/swc_plugin_example.wasm'), // 插件编译后的wasm文件
                pluginOptions || {},
              ],
            ],
          },
        },
        module: {
          type: 'es6',
        },
      });
      return code;
    },
  };
};

这个JavaScript代码加载了Rust编译出来的WASM文件，并且用@swc/core提供的transformSync函数来转换代码。

编译Rust代码：

首先，你需要安装Rust和wasm-pack：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

然后，在src/lib.rs所在的目录下，运行：

wasm-pack build --target web --no-default-features

这会生成一个pkg目录，里面包含了WASM文件和一些其他的资源。

使用SWC插件：

// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": false
    },
    "transform": {
      "plugin": [["./index.js", {}]] // 引用你的JavaScript Wrapper
    }
  },
  "module": {
    "type": "es6"
  }
}

在.swcrc文件中，指定你的JavaScript Wrapper的路径，SWC就会加载你的插件了。

SWC Plugin API的优势：

性能更高: Rust的性能比JavaScript高很多，所以SWC插件的性能也更高。
更灵活: Rust可以访问更底层的API，所以SWC插件可以做更多的事情。
更安全: Rust的类型系统可以防止很多错误，所以SWC插件更安全。

ESBuild vs SWC Plugin API：选哪个？

特性	ESBuild Plugin API	SWC Plugin API
语言	JavaScript	Rust + JavaScript
易用性	简单易用	相对复杂
性能	相对较低	较高
灵活性	相对较低	较高
适用场景	简单的代码转换和优化，快速原型开发	复杂的代码转换和优化，对性能要求高的场景

总结：

ESBuild和SWC的Plugin API都非常强大，可以用来做很多事情。ESBuild的Plugin API简单易用，适合快速原型开发。SWC的Plugin API性能更高，更灵活，适合复杂的代码转换和优化。选择哪个，取决于你的具体需求。

记住，无论是ESBuild还是SWC，Plugin API的精髓在于理解和操作AST (Abstract Syntax Tree)。AST是代码的抽象表示，理解AST才能真正理解代码的结构，才能编写出强大的代码转换和优化插件。

希望今天的讲解对大家有所帮助，祝大家写出更牛逼的插件！下次有机会，我们再深入探讨AST的奥秘！

发表回复 取消回复

发表回复取消回复