WXT中文文档（机翻）

Appearance

项目结构 ​

WXT遵循严格的项目结构。默认情况下，它采用平面文件夹结构，如下所示：

html
📁 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 assets/
   📁 components/
   📁 composables/
   📁 entrypoints/
   📁 hooks/
   📁 modules/
   📁 public/
   📁 utils/
   📄 .env
   📄 .env.publish
   📄 app.config.ts
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

以下是这些文件和目录的简要说明：

  • .output/：所有构建 artifact 将在这里
  • .wxt/：由 WXT 生成，包含 TS 配置
  • assets/：包含所有需要通过 WXT 处理的 CSS、图片和其他资产
  • components/：默认导入的 UI 分量
  • composites/：默认导入的 composable 函数用于 Vue
  • entrypoints/：包含所有要打包到 your 扩展中的 entrypoints
  • hooks/：默认导入的 hooks 用于 React 和 Solid
  • public/：包含任何你想直接复制到输出文件夹中但不进行处理的文件
  • utils/：默认导入的通用工具，贯穿整个项目
  • .env：包含 环境变量
  • .env.publish：包含用于 发布 的环境变量
  • app.config.ts：包含 运行时配置
  • package.json：您的包管理器使用的标准文件
  • tsconfig.json：告诉 TypeScript 如何行为的配置文件
  • web-ext.config.ts：配置 浏览器启动
  • wxt.config.ts：WXT 项目的主要配置文件

添加一个 src/ 文件夹 ​

许多开发者喜欢有一个 src/ 文件夹来将源代码与配置文件分开。您可以在 wxt.config.ts 中启用它：

ts
// wxt.config.ts
export default defineConfig({
  srcDir: 'src',
});

启用后，项目结构应如下所示：

html
📁 {rootDir}/
   📁 .output/
   📁 .wxt/
   📂 src/
      📁 assets/
      📁 components/
      📁 composables/
      📁 entrypoints/
      📁 hooks/
      📁 modules/
      📁 public/
      📁 utils/
      📄 app.config.ts
   📄 .env
   📄 .env.publish
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

配置其他文件夹 ​

您可以通过以下方式配置以下目录：

ts
// wxt.config.ts
export default defineConfig({
  // 相对于项目根目录
  srcDir: "src",             // 默认值："."
  outDir: "dist",            // 默认值：".output"

  // 相对于 srcDir
  entrypointsDir: "entries", // 默认值："entrypoints"
  modulesDir: "wxt-modules", // 默认值："modules"
  publicDir: "static",       // 默认值："public"
})

您可以用绝对路径或相对路径。