企业官网建设流程全解析

• 桌面应用

本篇技术指南以仓库根目录 README.md 为核心骨架，系统讲解 Brave 桌面浏览器（macOS / Windows / Linux）Muon 时代的完整开发工作流：从环境准备、克隆与依赖安装，到双终端热更新运行、客户端/服务端通信端口定制、Webdriver 自动化测试，以及基于 Electron 分支 Muon 的内核级二次开发。文中所有结论均以本仓库实际源码与配置文件为证据，读者读完即可在本仓库基础上独立完成构建、运行与测试的整套开发闭环。

仓库定位与版本背景

browser-laptop 是 Brave 在早期采用的Muon（Electron 分支）内核上的桌面浏览器实现，覆盖 macOS、Windows 与 Linux 三大平台。README 明确指出该仓库已处于弃用（Deprecated）过渡期：官方后续开发已迁移到基于brave-core的新代码库，本仓库仅保留 Release 一个活跃发布渠道，Beta 与 Developer 渠道早已切换到新代码库。

因此，阅读本文时应注意适用前提：以下所有命令与配置均针对本仓库（Muon 版），其工程形态（如app/主进程、js/渲染进程、webpack 打包、Spectron 测试）是理解代码库组织方式的第一手材料。仓库的工程入口位于 package.json："main": "./app/index.js"，即主进程入口；渲染进程入口见 js/entry.js，它负责加载各类 less 样式、挂载 React 组件Window并初始化窗口 store。

环境准备（Prerequisites）

在克隆与构建之前，需要先满足两项基础依赖，这也是整个开发环境的地基：

1. Node.js 当前 LTS 版本——可通过系统包管理器、nvm或 Node.js 官网安装。从 package.json 的engines字段可以看到硬性下限为node >= 7.9.0，但 README 建议使用 LTS 版本以获得稳定运行环境。
2. npm 5 及以上版本——原因很直接：npm 5 引入了package-lock.json锁定机制，本仓库根目录已包含 package-lock.json，只有 npm 5+ 才能正确利用它保证依赖版本可复现。

Linux 发行版系统包

根据发行版不同，还需安装用于原生模块编译与打包的系统级工具：

Debian / Ubuntu / Linux Mint：

apt-get install build-essential rpm ninja-build

Fedora：

dnf install rpm-build dnf group install "Development Tools" "C Development Tools and Libraries"

其中rpm/rpm-build与ninja-build服务于后续的打包流程与原生模块构建；build-essential提供编译工具链。若在 Linux 上直接安装发布版而非源码构建，则可参考仓库内 docs/linuxInstall.md，它详细记录了 Snapcraft、apt/dnf/zypper 仓库安装以及直接下载 deb/rpm/原始二进制等多种渠道。

获取源码与安装依赖

克隆仓库

README 提供了三种克隆方式，按场景选择：

# 供 beta 测试者使用（浅克隆，体积更小）： git clone --depth 1 https://github.com/brave/browser-laptop # 开发者走 HTTPS： git clone https://github.com/brave/browser-laptop # 开发者走 SSH： git clone git@github.com:brave/browser-laptop.git

在镜像环境中，对应命令为：

git clone https://gitcode.com/gh_mirrors/br/browser-laptop

随后进入工作目录：

cd browser-laptop

安装 Node 依赖

npm install

也支持使用 yarn 替代：yarn install。

值得说明的是，npm install并非只拉取依赖。查看 package.json 的postinstall脚本可以发现安装后会自动串联三段构建流程：

"postinstall": "npm run package-tor && npm run download-sync-client && webpack"

即：打包 Tor 内核（tools/package_tor.js）→ 下载同步客户端（tools/downloadSyncClient.js）→ 执行 webpack 打包（webpack.config.js）。同时依赖中的electron-prebuilt指向 Brave 自己的 fork（brave/electron-prebuilt），默认会拉取预编译的 Muon 二进制，这也是“开箱即用”的保障。

运行开发版浏览器：双终端工作流

README 推荐用两个终端配合开发：

终端一：监听代码变更，实时增量构建

npm run watch

该命令本质是启动webpack-dev-server（见 package.json 的"watch": "webpack-dev-server --color"）。结合 webpack.config.js 的development()分支可看到：开发模式下启用了HotModuleReplacementPlugin热更新插件，devServer 的contentBase指向app/extensions/brave，产物以http://localhost:<port>/gen/形式从内存提供，并忽略node_modules与test/**的监听以降低开销。

终端二：启动浏览器本体

npm start

npm start实际执行node ./tools/start.js ...（参数包括--user-data-dir-name=brave-development --enable-logging --v=0 --enable-extension-activity-logging --enable-sandbox-logging --enable-dcheck）。看 tools/start.js 的实现可知，它本质是一个启动器：设置NODE_ENV后通过child_process.spawn拉起electron二进制并传入仓库目录作为应用路径，同时透传后续参数、保持 stdio 继承，并妥善处理SIGTERM/SIGINT信号转发。

常见故障与修复

• 若遇到与 Muon（brave/electronfork）更新相关的报错，README 给出的修复方案是先做一次干净的重新安装：

  rm -rf node_modules/ npm install

• 若仍不生效，则需清理本地的 Electron 缓存目录~/.electron后再重试。

从源码看，仓库其实提供了更规范的清理入口 tools/clean.js，它支持多种清理粒度：nodeModules()移除node_modules、electron()移除~/.electron、userData按需清理ABPFilterParserData.dat、httpse.json、SafeBrowsingData.dat、TrackingProtection.dat、session-store-1等运行时数据文件。对应的 npm scripts（如npm run clean、npm run clean-adblock-data）也在 package.json 中一并提供。

定制客户端/服务端通信端口

Brave 默认使用端口 8080作为客户端（渲染层）与服务器（主进程层）之间的通信端口，其默认值定义在 package.json 的config字段：

"config": { "port": "8080" }

如果 8080 已被占用（例如本地有 web 代理），可以通过 npm config 覆盖该端口，无需改代码：

npm config set brave:port 9001

这一配置的传播链路在源码中可以完整追踪：

1. webpack.config.js 第 7 行通过process.env.npm_package_config_port读取端口，并在DefinePlugin中将其注入为编译期常量BRAVE_PORT；
2. 渲染进程侧 app/filtering.js 构造资源拦截重定向 URL 时使用process.env.BRAVE_PORT || process.env.npm_package_config_port；
3. 扩展加载逻辑 app/extensions.js 在开发模式下拼接localhost:<port>作为 devServer 地址。

也就是说，修改端口后需重新执行 webpack 构建（重启npm run watch）使新端口生效。

运行 Webdriver 自动化测试

完整测试与单元测试

测试体系基于mocha + webdriver.io（经 Spectron 驱动真实浏览器实例），测试文件统一放在顶层test/目录下，并以Test.js后缀命名。先安装 mocha 全局依赖：

npm install --global mocha

运行全部测试（含 UI 集成测试）：

npm run test

仅运行单元测试（更快更稳定）：

npm run unittest

对应实现见 package.json：test执行mocha "test/**/*Test.js"，unittest先跑 Python 测试工具再执行mocha "test/unit/**/*Test.js"。

测试专用构建与子集筛选

为了贴近生产环境，测试不使用 webpack dev server，因此改动代码后需单独保持测试 bundle 最新：

npm run watch-test

（npm run watch-all则同时并行watch与watch-test，适合全量开发。）然后在另一个终端执行：

npm test

只跑满足特定条件的用例，可用--grep按测试名称过滤：

npm run test -- --grep="expression"

例如--grep="^tabs"会匹配所有以tabs开头的 describe/it 用例，该用法对test与unittest两种模式均有效。更细致的测试编写规范、常用 helper 方法（如waitForTabCount、changeSetting、getAppState）与间歇性失败规避策略，可进一步阅读 docs/tests.md；Spectron 驱动层的封装见 test/lib/brave.js，它从generateUserDataDir()生成每次运行独立的临时用户数据目录，并注册了大量自定义 webdriver 命令。

测试环境的行为差异

从源码可以观察到测试环境的特殊处理：js/entry.js 在NODE_ENV === 'test'时会把渲染进程的 store 与 actions 挂载到electron.testData供测试访问，并默认关闭新标签页背景图（tabs.show-dashboard-images = false），以加速测试运行——这与 docs/tests.md 中“新标签页背景默认禁用，需要时用changeSetting('tabs.show-dashboard-images', true)重新开启”的说明完全对应。

基于 Muon 内核的二次开发

默认情况下npm install会通过 Brave 自有的electron-prebuiltfork 拉取预编译好的 Muon 二进制，普通应用层开发无需关心内核。

但若想修改 Muon 本身（例如向 webview 暴露一个新事件、扩展内核 API），就必须自行构建 Muon。README 给出的路径是：先检出browser-laptop-bootstrap引导仓库，再按其中的 wiki 步骤搭建 Muon 构建环境，随后以本仓库作为应用层代码运行。这一步骤面向的是需要触碰浏览器内核的进阶开发者，普通功能开发并不需要。

打包：安装包、Bundle 与自动更新

发布相关的打包流程（安装包生成、Bundle 组装、自动更新支持）由仓库维护者通过 wiki 提供指引，本仓库侧对应的可执行入口包括：

• tools/buildInstaller.js（对应npm run build-installer）
• tools/buildPackage.js（对应npm run build-package）
• 平台安装器资源位于 res/（含builderConfig.json、NSIS 脚本、各发行版打包配置等）

此外 docs/buildingReleases.md 与 docs/autoUpdates.md 分别记录了发布构建与自动更新机制。需要注意的是，这些流程同样以 Muon 时代为适用前提。

Windows 与预配置虚拟机支持

• Windows 开发者：README 指引参考 wiki 中的 Windows 构建指南进行完整环境搭建；仓库 tools/windows/ 目录下也提供了fix-electron.ps1、re-npm.ps1、vs2015-sp3-fix-npm.ps1等针对 Windows 的辅助脚本。
• 预配置虚拟机：部分平台可通过 Vagrant 预配置 VM 直接获得可开发环境，详情见 test/vms/vagrant/README.md；对应 npm 脚本（vagrant-up-linux、vagrant-ssh-linux等）也已内置在 package.json 中。

仓库配套文档索引

README 末尾列出的配套文档是深入该仓库最直接的入口，且均已存在于仓库内：

• CONTRIBUTING.md——贡献规范与提交约定（配套 COMMIT_TEMPLATE）
• docs/style.md——样式与编码风格约定（项目采用 JavaScript Standard Style，lint 入口为npm run lint）
• docs/tests.md——测试体系与子集运行方法
• docs/debugging.md——调试指南
• docs/translations.md——本地化翻译参与方式
• docs/linuxInstall.md——Linux 发行版安装指南

小结

从 README 出发结合源码可以确认：browser-laptop（Muon 版）的开发闭环是Node LTS + npm 5 的环境 →npm install自动完成 Tor/同步/打包 →npm run watch+npm start双终端热开发 →npm config set brave:port定制通信端口 →npm run watch-test+npm test自动化验证 →build-installer/build-package产出发布物。理解这套基于 webpack + Electron fork + Spectron 的工程骨架，对于阅读历史代码库、理解 Electron 应用的分进程架构，以及在 Muon 内核上做延伸开发，都是极具价值的参考样本。需始终牢记：该仓库已停止主线开发，新功能与贡献请转向新代码库。

• 桌面应用