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: [
    //    ...
    //    在这里你可以配置所有 webextkits 提供的 vite 插件
    ViteWebExtKits({
      extensionId: extId,
      transformersInputFolderPath: "./src/copy-folder",
    }),
  ],
});
import { defineConfig } from "vite";

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

如何使用 ​

把需要编译的 .js、.ts 文件放入 transformers 文件夹即可。比如放入以下文件

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 提供的静态资源文件夹，所有类型的文件都会被直接复制到 dist 目录。区别在于：public 中的 .js、.ts 文件不会被编译，而 transformers 中的 .js、.ts 文件会被编译后输出。

Powered by Vitepress