外掛

Plugin複製

type PluginBuilder = {
  onStart(callback: () => void | Promise<void>): void;
  onResolve: (
    args: { filter: RegExp; namespace?: string },
    callback: (args: { path: string; importer: string }) => {
      path: string;
      namespace?: string;
    } | void,
  ) => void;
  onLoad: (
    args: { filter: RegExp; namespace?: string },
    callback: (args: { path: string; loader: Loader; namespace: string; defer: () => Promise<void> }) => {
      loader?: Loader;
      contents?: string;
      exports?: Record<string, any>;
    },
  ) => void;
  config: BuildConfig;
};

type Loader =
  | "js"
  | "jsx"
  | "ts"
  | "tsx"
  | "json"
  | "jsonc"
  | "toml"
  | "yaml"
  | "file"
  | "napi"
  | "wasm"
  | "text"
  | "css"
  | "html";

myPlugin.ts複製

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "自定義載入器",
  setup(build) {
    // 實現
  },
};

index.ts複製

await Bun.build({
  entrypoints: ["./app.ts"],
  outdir: "./out",
  plugins: [myPlugin],
});

onStart(callback: () => void | Promise<void>): void;

index.ts複製

await Bun.build({
  entrypoints: ["./app.ts"],
  plugins: [
    {
      name: "onStart example",
      setup(build) {
        build.onStart(() => {
          console.log("Bundle started!");
        });
      },
    },
  ],
});

index.ts複製

const result = await Bun.build({
  entrypoints: ["./app.ts"],
  outdir: "./dist",
  sourcemap: "external",
  plugins: [
    {
      name: "睡眠 10 秒",
      setup(build) {
        build.onStart(async () => {
          await Bun.sleep(10_000);
        });
      },
    },
    {
      name: "記錄打包時間到檔案",
      setup(build) {
        build.onStart(async () => {
          const now = Date.now();
          await Bun.$`echo ${now} > bundle-time.txt`;
        });
      },
    },
  ],
});

onResolve(
  args: { filter: RegExp; namespace?: string },
  callback: (args: { path: string; importer: string }) => {
    path: string;
    namespace?: string;
  } | void,
): void;

index.ts複製

import { plugin } from "bun";

plugin({
  name: "onResolve 範例",
  setup(build) {
    build.onResolve({ filter: /.*/, namespace: "file" }, args => {
      if (args.path.startsWith("images/")) {
        return {
          path: args.path.replace("images/", "./public/images/"),
        };
      }
    });
  },
});

onLoad(
  args: { filter: RegExp; namespace?: string },
  callback: (args: { path: string; namespace: string; loader: Loader; defer: () => Promise<void> }) => {
    loader?: Loader;
    contents?: string;
    exports?: Record<string, any>;
  },
): void;

index.ts複製

import type { BunPlugin } from "bun";

const envPlugin: BunPlugin = {
  name: "環境變數外掛",
  setup(build) {
    build.onResolve({ filter: /^env$/ }, args => {
      return { path: args.path, namespace: "env" };
    });
    build.onLoad({ filter: /env/, namespace: "env" }, args => {
      return {
        contents: `export default ${JSON.stringify(process.env)}`,
        loader: "js",
      };
    });
  },
};

Bun.build({
  entrypoints: ["./app.ts"],
  outdir: "./dist",
  plugins: [envPlugin],
});

// import env from "env"
// env.FOO === "bar"

index.ts複製

import { plugin } from "bun";

plugin({
  name: "跟蹤匯入",
  setup(build) {
    const transpiler = new Bun.Transpiler();

    let trackedImports: Record<string, number> = {};

    // 每個經過此 onLoad 回撥的模組
    // 都會記錄其匯入資訊到 `trackedImports`
    build.onLoad({ filter: /\.ts/ }, async ({ path }) => {
      const contents = await Bun.file(path).arrayBuffer();

      const imports = transpiler.scanImports(contents);

      for (const i of imports) {
        trackedImports[i.path] = (trackedImports[i.path] || 0) + 1;
      }

      return undefined;
    });

    build.onLoad({ filter: /stats\.json/ }, async ({ defer }) => {
      // 等待所有檔案載入完成，確保每個檔案都經過上面的 `onLoad()`
      // 並且匯入資訊已被跟蹤
      await defer();

      // 輸出包含匯入統計資訊的 JSON
      return {
        contents: `export default ${JSON.stringify(trackedImports)}`,
        loader: "json",
      };
    });
  },
});

bun add -g @napi-rs/cli
napi new

cargo add bun-native-plugin

lib.rs複製

use bun_native_plugin::{define_bun_plugin, OnBeforeParse, bun, Result, anyhow, BunLoader};
use napi_derive::napi;

/// 定義外掛及其名稱
define_bun_plugin!("replace-foo-with-bar");

/// 這裡我們實現 `onBeforeParse`，程式碼將所有出現的
/// `foo` 替換成 `bar`。
///
/// 使用 #[bun] 宏生成部分樣板程式碼。
///
/// 函式引數 (`handle: &mut OnBeforeParse`) 告訴
/// 宏此函式實現了 `onBeforeParse` 鉤子。
#[bun]
pub fn replace_foo_with_bar(handle: &mut OnBeforeParse) -> Result<()> {
  // 獲取輸入原始碼。
  let input_source_code = handle.input_source_code()?;

  // 獲取檔案的 Loader
  let loader = handle.output_loader();

  let output_source_code = input_source_code.replace("foo", "bar");

  handle.set_output_source_code(output_source_code, BunLoader::BUN_LOADER_JSX);

  Ok(())
}

import myNativeAddon from "./my-native-addon";
Bun.build({
  entrypoints: ["./app.tsx"],
  plugins: [
    {
      name: "my-plugin",

      setup(build) {
        build.onBeforeParse(
          {
            namespace: "file",
            filter: /\.tsx$/,
          },
          {
            napiModule: myNativeAddon,
            symbol: "replace_foo_with_bar",
            // external: myNativeAddon.getSharedState()
          },
        );
      },
    },
  ],
});

onBeforeParse(
  args: { filter: RegExp; namespace?: string },
  callback: { napiModule: NapiModule; symbol: string; external?: unknown },
): void;