Webextkits Docs

Appearance

transformers ​

什么是 transformers ​

transformers 是将指定文件夹(默认为 /src/transformers)下面所有以 .js,.ts 结尾的文件，通过 unbuild 编译后存放到 /dist/transformers 一个配置.

它类似于 webpack 中的 CopyWebpackPlugin 配置，但是与之不同的是，它只能处理 .js,.ts 结尾的文件，并将他们编译压缩后存放到 /dist/transformers 中

TIP

如果你需要 copy 其他类型的文件，请放到 public 文件夹中

如何配置 ​

如果你需要指定（不建议指定）transformers 文件夹可以像这样配置

typescript
import { defineConfig } from "vite";

export default defineConfig({
  //  ...
  plugins: [
    //    ...
    //    在这里你可以配置所有 webextkit 提供的 vite 插件
    ViteWebExtKits({
      extensionId: extId,
      transformersInputFolderPath: "./src/copy-folder",
    }),
  ],
});
import { defineConfig } from "vite";

export default defineConfig({
  //  ...
  plugins: [
    //    ...
    //    在这里你可以配置所有 webextkit 提供的 vite 插件
    ViteWebExtKits({
      extensionId: extId,
      transformersInputFolderPath: "./src/copy-folder",
    }),
  ],
});

如何使用 ​

你只需要将需要编译的 .js,.ts 文件放入到 transformer 中即可，比如我们放入以下文件

text
📦src
 ┣ 📂transformers
 ┃ ┗ 📜globalJs.ts
📦src
 ┣ 📂transformers
 ┃ ┗ 📜globalJs.ts

内容为

typescript
//  globalJs.ts
console.log("globalJs");
//  globalJs.ts
console.log("globalJs");

经过编译后会输出以下文件夹

text
📦dist
 ┣ 📂transformers
 ┃ ┗ 📜globalJs.js
📦dist
 ┣ 📂transformers
 ┃ ┗ 📜globalJs.js

内容为

js
//  globalJs.js
(function () {
  "use strict";
  console.log("globalJs");
})();
//  globalJs.js
(function () {
  "use strict";
  console.log("globalJs");
})();

如果你想在 background 中引用它只需要这样写

typescript
browser.scripting.registerContentScripts([
  {
    id: `inject-module`,
    js: ["transformers/globalJs.js"],
    matches: ["https://github.com/*"],
    runAt: "document_end",
    world: "MAIN",
  },
]);
browser.scripting.registerContentScripts([
  {
    id: `inject-module`,
    js: ["transformers/globalJs.js"],
    matches: ["https://github.com/*"],
    runAt: "document_end",
    world: "MAIN",
  },
]);

它与 public 文件夹有什么区别？ ​

public 文件夹是 vite 提供的静态资源处理文件夹，你可以将所有类型的文件都放在里面，它们都会被 copy 到 dist 目录，与之不同的是，在 public 文件夹中的 .js,.ts 文件不会被编译，而放在 transformers 中的 .js,.ts 文件会被编译后输出

Powered by Vitepress