如何快速本地构建BoostNote-Legacy：开发环境搭建与VSCode调试完整教程-北京尧图网络

如何快速本地构建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），仅供参考

如何快速本地构建BoostNote-Legacy：开发环境搭建与VSCode调试完整教程

相关推荐

10分钟搞定黑苹果EFI：OpCore Simplify一键生成工具完整指南

别被标题党忽悠，一文搞懂爱奇艺转换器mp4背后的代码逻辑

gatsby-source-wordpress 预览（Preview）配置完全指南：在 WordPress 中接入 Gatsby 实时内容预览

更多资讯

富贵乐园新手避坑：3个性能优化点让项目快10倍

5分钟搞定hp quick launch buttons最佳实践，面试不再卡壳

日批过程图解原理：3步搞定环境配置不再卡半天

3个版本升级坑：API全变后如何保住工作积极性与最佳实践

Excel绘图性能优化实战:面试必问的3个坑与代码解法

3个坑搞定创造价值源码解析面试

今日更新

OneUptime 自定义探针（Custom Probe）部署实战：私网监控、代理配置与断连排障全指南

大众TL52625前端框架材料要求详解：从性能测试到落地执行

TiXL 浮点运算算子库 Lib.numbers.float 完全指南：44 个算子的参数详解、源码原理与实战串联

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？