企业官网建设流程全解析

LiveTL开发环境搭建教程：从npm ci到Chrome/Firefox三大构建目标，跑通整个monorepo

【免费下载链接】LiveTLLiveTL, HyperChat, and YtcFilter — We make free and open source extensions, used and loved by thousands of users around the world.项目地址: https://gitcode.com/gh_mirrors/li/LiveTL

LiveTL 是一个免费开源的直播实时翻译浏览器扩展项目。本教程带你从npm ci一键安装依赖开始，一步步跑通这个包含 LiveTL、HyperChat、YtcFilter 三款扩展的 monorepo，掌握 Chrome MV3、Firefox MV3、Firefox MV2 三大构建目标与 watch 开发模式，快速搭建可改、可测、可打包的完整开发环境。

🧭 项目概览：一个仓库，三款扩展

LiveTL monorepo 采用 npm workspaces + Turborepo 组织，三个应用各自独立构建：

关键点：所有应用都维护在main分支上，MV2 / MV3 是构建目标而不是分支。这一约定写在根目录的 AGENTS.md 与apps/LiveTL/README.md中，理解它是搭建环境的第一步。

✅ 环境准备：Node 24 + Linux/WSL

按照 CONTRIBUTING.md 的要求，本地开发环境需要：

⚠️ 仓库明确期望在 Linux/Unix 环境开发，脚本均基于 bash 编写，原生 Windows 不保证可用。

📦 克隆仓库并一键安装依赖

只需 4 条命令完成初始化：

git clone https://gitcode.com/gh_mirrors/li/LiveTL cd LiveTL git switch main npm ci

npm ci会依据根目录package.json（workspaces: ["apps/*", "packages/*"]）和package-lock.json安装全部工作区依赖，三个应用共享一套node_modules布局，无需进入各目录分别安装。仓库锁定packageManager: npm@11.17.0，切换分支或 lockfile 变化后建议重新执行npm ci。

🎯 认识三大构建目标与命令

LiveTL 由 Vite 构建，apps/LiveTL/vite.config.js通过环境变量决定目标：BROWSER（chrome/firefox）+MV（2 时强制 Firefox）。构建产物输出到对应的build/子目录：

命令定义见 package.json，任务依赖与缓存输出在 turbo.json 中统一管理。

三个目标中，Chrome MV3 与 Firefox MV2 是实际发布目标；Firefox MV3 目前仅用于验证（MV3 无法完成 LiveTL 所需的响应头改写）。

🔁 启动开发模式：watch + 加载未打包扩展

以 LiveTL 为例，在仓库根目录运行 watch 构建：

npm run start # watch Chrome MV3，最常用 npm run dev:firefox # watch Firefox MV3 npm run dev:mv2 # watch Firefox MV2

构建产物实时输出后，按浏览器加载即可：

1. Chrome/Chromium：打开chrome://extensions，开启"开发者模式"，选择加载已解压的扩展程序，指向apps/LiveTL/build/chrome。
2. Firefox：打开about:debugging→ 此浏览器 →临时载入附加组件，选择build/firefox（MV3）或build/mv2（MV2）。

改代码 → 自动重新打包 → 刷新扩展页面，即可看到变更，无需手动复制文件。

其他两个应用同理，用-w指定工作区：

npm run dev:chrome -w @livetl/hyperchat # HyperChat watch npm run dev:chrome -w @livetl/ytcfilter # YtcFilter watch npm run start:firefox -w @livetl/ytcfilter # watch 并自动拉起 Firefox

📦 生产构建：一键构建、校验并打包

需要完整构建（类型检查 + 三目标构建 + 产物校验 + zip 打包）时：

VERSION=0.0.0 npm run build -w @livetl/livetl

也可以用根目录别名按应用构建全部目标：

VERSION变量决定写入manifest.json的版本号，本地构建缺省时回退到src/manifest.json中的版本。构建后各应用还会执行verify:build校验产物完整性。

🧪 验证构建：测试、Lint 与冒烟检查

提交前按仓库标准流程跑一遍（命令均从根目录执行）：

npm run format:check # oxfmt 格式检查 npm run lint:check # ESLint 检查 npm run test # Jest 单元测试 VERSION=0.0.0 npm run build # 全目标构建+校验

LiveTL 还提供浏览器级冒烟测试：bash apps/LiveTL/scripts/codex-dev.sh go-test会在无头 Chromium 中加载build/chrome扩展，验证 LiveTL 按钮注入与 HyperChat iframe 挂载是否成功（Linux 需先安装xvfb xauth）。更完整的 e2e 测试位于apps/LiveTL/e2e/，用npm run e2e触发。

🛠️ 常见问题速查

🎉 到这里，你就完成了 LiveTL monorepo 开发环境的搭建：npm ci装好依赖，三大构建目标随时可切，watch 模式改码即生效。接下来可以深入apps/LiveTL/src/的 Svelte 组件，或阅读 AGENTS.md 了解分支规范与发布流程，开始你的第一次提交！

【免费下载链接】LiveTLLiveTL, HyperChat, and YtcFilter — We make free and open source extensions, used and loved by thousands of users around the world.项目地址: https://gitcode.com/gh_mirrors/li/LiveTL