如何快速本地构建BoostNote-Legacy开发环境搭建与VSCode调试完整教程【免费下载链接】BoostNote-LegacyThis repository is outdated and new Boost Note app is available! Weve launched a new Boost Note app which supports real-time collaborative writing. https://github.com/BoostIO/BoostNote-App项目地址: https://gitcode.com/gh_mirrors/bo/BoostNote-LegacyBoostNote-Legacy 是一款面向程序员的开源 Markdown 笔记应用基于 Electron React Redux Webpack 技术栈构建。本教程带你从零完成BoostNote-Legacy 本地构建全流程开发环境搭建、一键热启动、VSCode 断点调试再到运行测试验证新手也能照着 10 分钟跑起来。⚠️ 小提示这是 Legacy 版本旧版架构作者已推出支持实时协作的新版 Boost Note。但 Legacy 版的 Electron Webpack 技术栈经典完整非常适合用来学习桌面端应用的本地构建与调试。一、开发环境搭建依赖清单速览BoostNote-Legacy 使用的是Electron 4 Webpack 1的较老技术栈所以 Node.js 版本不能太新这是新手最容易踩的坑。依赖版本建议说明Node.js10.x / 12.x推荐 12新版 Node 与 Webpack 1 不兼容yarn1.x仓库自带 yarn.lock推荐用 yarn 安装VS Code最新稳定版用于断点调试Debugger for Chrome 插件最新仓库已内置调试配置装插件即可核心脚本都定义在 package.json 中提前认识一下npm start直接用 Electron 启动应用npm run dev启动 Webpack Dev Server Electron 热重载开发首选npm run watch仅启动 Webpack 热更新监听npm run test/npm run lint跑测试与代码检查npm run compile生产环境打包二、获取源码并安装依赖一键克隆在终端中克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/bo/BoostNote-Legacy cd BoostNote-Legacy yarn install由于依赖包含 CodeMirror、mermaid、katex 等大量编辑器组件首次安装可能需要几分钟。安装完成后会生成node_modules其中node_modules/.bin/electron就是后续启动和调试的入口。 项目使用electron-config读取用户配置开发时可以复制 .boostnoterc.sample 为自己的.boostnoterc调整字体、主题、缩进等编辑器偏好。三、一键热启动本地构建并运行 BoostNote在仓库根目录执行npm run dev这条命令背后做了两件事逻辑见 dev-scripts/dev.js启动 Webpack Dev Server监听localhost:8080开启 Hot Module Replacement修改代码后自动增量编译拉起 Electron以--hot模式加载 index.js应用从 8080 端口拉取资源保存代码即可在应用里看到效果看到终端输出Bundle success !和Electron startedBoostNote 的窗口就会弹出来 —— 恭喜本地构建完成 ✅ 其他启动方式只想要一个纯净的应用窗口无热更新npm start已在跑 Electron、只想监听编译npm run watchWebpack 的入口与加载规则Babel 转译 JS、Stylus CSS Modules 处理样式定义在 webpack.config.js 中排查构建报错时可对照查看。四、VSCode 调试双进程断点怎么打Electron 应用有Main主进程和Renderer渲染进程两个进程仓库已经在 .vscode/launch.json 中配好了对应的调试配置无需手写BoostNote Main以 Node 模式启动 Electron附加--remote-debugging-port9223和--hot参数BoostNote Renderer以 Chrome 模式 attach 到 9223 端口并配置了 sourceMapPathOverrides 让源码映射正确BoostNote Allcompounds一条 F5 同时调试两个进程 ——推荐用这个调试步骤用 VS Code 打开项目确认已安装Debugger for Chrome插件并重启运行构建任务CtrlShiftP→Run Build Task→ 选择Build Boostnote任务定义见 .vscode/tasks.json等价于npm run watch打开调试视图CtrlShiftD配置选择BoostNote All按F5启动在 lib/main-app.js主进程或 browser/Main.js渲染进程中设置断点即可命中如果断点显示未验证说明断点落在了另一个进程里在调试面板顶部的进程下拉框中切换到BoostNote Main或BoostNote Renderer即可。更多调试技巧如打开 DevTools 的CtrlShiftI快捷方式可参考官方调试文档 docs/debug.md。五、验证你的构建测试与代码风格检查修改代码后用下面两条命令确认没有引入问题这也是提交 Pull Request 前的必要步骤见 contributing.mdnpm run test # 依次运行 ava jest 两套单元测试 npm run lint # ESLint Prettier 代码风格检查测试用例分布在 tests/ 目录tests/dataApi/覆盖笔记、存储、文件夹等数据操作tests/lib/覆盖 Markdown 解析、搜索等工具函数。想深入代码规范可阅读 docs/code_style.md。六、常见问题快速排查现象原因与解决安装依赖后启动报Unexpected tokenNode 版本过新用 nvm 切到 Node 12Webpack Dev Server listening后卡住8080 端口被占用关闭占用进程或重启电脑Linux 下 Electron 窗口白屏缺少系统图形库libgtk、libnss 等按发行版提示安装断点不命中进程选错Main/Renderer 切换一下打包时提示auth_code.json is not found正常现象无签名证书时跳过代码签名见 gruntfile.js结语到这里你已经掌握了 BoostNote-Legacy 本地构建的完整链路克隆 → 装依赖 →npm run dev热启动 → VSCode 双进程调试 → 测试验证。这套「Electron Webpack CSS Modules」的经典架构在大量桌面应用中通用学到的调试技巧可以平移到同类项目。打开 browser/components/ 下的任意组件试试吧【免费下载链接】BoostNote-LegacyThis repository is outdated and new Boost Note app is available! Weve launched a new Boost Note app which supports real-time collaborative writing. https://github.com/BoostIO/BoostNote-App项目地址: https://gitcode.com/gh_mirrors/bo/BoostNote-Legacy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考