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

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/LiveTLLiveTL 是一个免费开源的直播实时翻译浏览器扩展项目。本教程带你从npm ci一键安装依赖开始一步步跑通这个包含 LiveTL、HyperChat、YtcFilter 三款扩展的 monorepo掌握 Chrome MV3、Firefox MV3、Firefox MV2 三大构建目标与 watch 开发模式快速搭建可改、可测、可打包的完整开发环境。 项目概览一个仓库三款扩展LiveTL monorepo 采用 npm workspaces Turborepo 组织三个应用各自独立构建应用路径说明LiveTLapps/LiveTL/直播流实时翻译扩展核心产品HyperChatapps/HyperChat/独立聊天增强扩展源码被 LiveTL 直接复用YtcFilterapps/YtcFilter/聊天过滤扩展触发器、预设、存档UI 组件库packages/ui/共享图标等 UI 资源关键点所有应用都维护在main分支上MV2 / MV3 是构建目标而不是分支。这一约定写在根目录的 AGENTS.md 与apps/LiveTL/README.md中理解它是搭建环境的第一步。✅ 环境准备Node 24 Linux/WSL按照 CONTRIBUTING.md 的要求本地开发环境需要依赖版本/要求Git任意稳定版Node.js24Chrome / Chromium用于加载 MV3 扩展Firefox用于加载 MV3 / MV2 扩展操作系统Linux 或类 UnixWindows 请用WSL⚠️ 仓库明确期望在 Linux/Unix 环境开发脚本均基于 bash 编写原生 Windows 不保证可用。 克隆仓库并一键安装依赖只需 4 条命令完成初始化git clone https://gitcode.com/gh_mirrors/li/LiveTL cd LiveTL git switch main npm cinpm ci会依据根目录package.jsonworkspaces: [apps/*, packages/*]和package-lock.json安装全部工作区依赖三个应用共享一套node_modules布局无需进入各目录分别安装。仓库锁定packageManager: npm11.17.0切换分支或 lockfile 变化后建议重新执行npm ci。 认识三大构建目标与命令LiveTL 由 Vite 构建apps/LiveTL/vite.config.js通过环境变量决定目标BROWSERchrome/firefoxMV2 时强制 Firefox。构建产物输出到对应的build/子目录目标构建命令watch 命令产物目录Chrome MV3npm run build:chromenpm run start等价dev:chromeapps/LiveTL/build/chromeFirefox MV3npm run build:firefoxnpm run dev:firefoxapps/LiveTL/build/firefoxFirefox MV2npm run build:mv2npm run dev:mv2apps/LiveTL/build/mv2命令定义见 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构建产物实时输出后按浏览器加载即可Chrome/Chromium打开chrome://extensions开启开发者模式选择加载已解压的扩展程序指向apps/LiveTL/build/chrome。Firefox打开about:debugging→ 此浏览器 →临时载入附加组件选择build/firefoxMV3或build/mv2MV2。改代码 → 自动重新打包 → 刷新扩展页面即可看到变更无需手动复制文件。其他两个应用同理用-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 打包时VERSION0.0.0 npm run build -w livetl/livetl也可以用根目录别名按应用构建全部目标应用命令产出的发布包LiveTLnpm run build:livetlLiveTL-Chrome.zip、LiveTL-Firefox-mv2.zipHyperChatnpm run build:hyperchatHyperChat-Chrome.zip、HyperChat-Firefox.zipYtcFilternpm run build:ytcfilterYtcFilter-Chrome.zip、YtcFilter-Firefox.zipVERSION变量决定写入manifest.json的版本号本地构建缺省时回退到src/manifest.json中的版本。构建后各应用还会执行verify:build校验产物完整性。 验证构建测试、Lint 与冒烟检查提交前按仓库标准流程跑一遍命令均从根目录执行npm run format:check # oxfmt 格式检查 npm run lint:check # ESLint 检查 npm run test # Jest 单元测试 VERSION0.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触发。️ 常见问题速查问题解决办法Windows 上脚本报错改用 WSL 环境重新npm ciMV2 构建报错MV2 is Firefox-only属正常保护逻辑MV2必须配合BROWSERfirefox切分支后依赖异常重新执行npm ci再构建Chrome 加载 MV2 扩展失败MV2 目标仅面向 Firefox 验证现代 Chromium 不保证可用想看某个应用的文档见apps/LiveTL/README.md、apps/HyperChat/README.md、apps/YtcFilter/README.md 到这里你就完成了 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考