Webextkits Docs

Appearance

什么是 ViteWebExtKits ​

ViteWebExtKits 是一个集成了 externals 拆分, 代码加密, 文件转换, 字符串替换 和 多入口支持 的一个 vite 扩展。

如何配置 ​

在 vite.config.ts 中你可以直接配置 ViteWebExtKits,

typescript
import { defineConfig } from "vite";

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

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

以下是需要传递的参数定义. 具体如何使用，可以查看后序的内容

typescript
export type Props = {
  //  扩展 ID，用于处理 vendor 和 inject 时候的 externals 的一系列唯一 ID
  extensionId: string;

  //  vite 中的 defines ，将会运用到 injects , transformers 和 options, contentScript 与 background 中
  defines?: Record<string, string>;

  //  injects watch 文件夹位置
  injectsInputFolderPath?: string;

  //  需要被打包到 externals 里面的库名称，请填写 package.json 中的名称
  //  比如 'antd', '@ant-design/icons'
  externals?: string[];

  //  externals 入口文件位置
  externalsInputFilePath?: string;

  //  将文件打包成 iife 格式的文件
  transformersInputFolderPath?: string;

  //  只加密 injects 和 transformers 里面的内容
  obfuscation?: Array<"injects" | "transformers">;
};
export type Props = {
  //  扩展 ID，用于处理 vendor 和 inject 时候的 externals 的一系列唯一 ID
  extensionId: string;

  //  vite 中的 defines ，将会运用到 injects , transformers 和 options, contentScript 与 background 中
  defines?: Record<string, string>;

  //  injects watch 文件夹位置
  injectsInputFolderPath?: string;

  //  需要被打包到 externals 里面的库名称，请填写 package.json 中的名称
  //  比如 'antd', '@ant-design/icons'
  externals?: string[];

  //  externals 入口文件位置
  externalsInputFilePath?: string;

  //  将文件打包成 iife 格式的文件
  transformersInputFolderPath?: string;

  //  只加密 injects 和 transformers 里面的内容
  obfuscation?: Array<"injects" | "transformers">;
};

Powered by Vitepress