Boostnote 构建与打包全指南从 Webpack HMR 开发调试到生成 deb/rpm 发行包【免费下载链接】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本文以 BoostnoteLegacy 版 Electron 笔记应用当前仓库package.json版本为 0.16.1的官方构建文档为核心系统梳理从源码构建这一应用的完整链路环境版本要求、基于 Webpack HMR 的开发模式、拉取 Pull Request 代码进行验证、使用 Grunt 完成生产构建与代码签名以及在 Linux 平台制作.deb/.rpm发行包。读完本文你将掌握yarn run dev热更新背后的真实执行链路dev-scripts/dev.js webpack.config.js、Grunt 任务编排逻辑gruntfile.js并能独立完成 Boostnote 各平台的产物构建。一、构建环境要求Node 8.x 与 npm 6.x原文档明确列出了构建 Boostnote 所需的版本基线npm: 6.xnode: 8.x结合仓库 package.json 可以进一步确认当时的工具链选型Electron 固定在 4.2.12config.electron-version字段webpack 为 1.12.2grunt 为 0.4.5依赖统一通过 Yarn 管理仓库根目录存在 yarn.lock所有文档命令均以yarn开头。因此请先确保本机 Node/npm 处于上述版本区间并安装 Yarn再进行后续操作。适用前提说明本文命令与源码行为以当前仓库实际内容为准。Boostnote 已迭代至新架构版本本文描述的构建流程仅适用于本仓库Legacy 分支源码。二、开发模式yarn run dev 与 Webpack HMRBoostnote 使用 Webpack HMRHot Module Replacement模块热替换进行日常开发。在项目根目录依次执行两条命令即可启动应用。1. 安装依赖包$ yarn该命令根据 yarn.lock 安装全部依赖与开发依赖。2. 构建并运行$ yarn run dev从 package.json 的scripts字段可以看到dev实际展开为cross-env NODE_ENVdevelopment node dev-scripts/dev.js真正驱动开发模式的是 dev-scripts/dev.js其执行流程可概括为读取 webpack.config.js开发配置注入HotModuleReplacementPlugin并把webpack-dev-server/client?http://localhost:8080/与webpack/hot/dev-server两个入口追加到config.entry.main入口主文件为 webpack-skeleton.js 中指定的./browser/main/index.js以localhost:8080端口启动 Webpack Dev Server配置项hot: true、inline: true、publicPath: http://localhost:8080/assets/首次打包成功后通过spawn(electron, [--hot, ./index.js])拉起 Electron 应用其中--hot标志驱动渲染进程从 Dev Server 拉取最新模块。开发态配置webpack.config.js还包含两个值得注意的点devtool: cheap-module-eval-source-map提供较快的增量编译与源码映射.styl样式采用 CSS Modules 加载css?modulesimportLoaders1localIdentName[name]__[local]___[path]这也是下文新增 CSS 类需要手动刷新的原因。需要手动刷新应用的两种情况HMR 并非对所有改动都生效原文档特别提示以下两种场景需要手动刷新应用编辑组件Component的 constructor 方法时组件构造逻辑的变更无法通过热替换安全合并新增 CSS 类时原因与 1 类似——每个组件的 CSS 类是在 constructor 阶段由组件自身重写的新增类名后不会自动同步到已运行的实例。三、拉取并运行 Pull Request 中的代码若要验证 GitHub 上某个 Pull Request 的代码例如 PR 2794原文档给出了标准流程。核心思路是查看 PR 页面 URL 末尾的数字作为 PR 编号然后用PR占位符指代该编号不要带方括号。尚未 clone 过 master 分支git clone https://github.com/BoostIO/Boostnote.git cd Boostnote git fetch origin pull/PR/head:PR git checkout PR若需从本镜像仓库获取源码可执行git clone后进入仓库目录再执行后续 fetch/checkout 命令。已拥有 master 分支git fetch origin pull/PR/head:PR git checkout PR编译并运行该 PR 代码yarn yarn run dev其中git fetch origin pull/PR/head:PR会从远程拉取 PR 对应的引用git checkout PR切换到该分支之后复用与日常开发完全相同的yarnyarn run dev组合即可在本机运行 PR 中的改动。四、生产构建grunt pre-build 与 grunt buildBoostnote 使用 Grunt 自动化整个打包部署流程。注意默认的grunt任务default任务注册为build会包含 codesignmacOS 代码签名与 authenticodeWindows 代码签名步骤官方不推荐直接执行因为签名需要私钥与证书。因此原文档专门提供了一个只生成可执行文件的预构建脚本grunt pre-build从 gruntfile.js 可以看到pre-build与build的任务编排compile以BABEL_ENVproduction、NODE_ENVproduction环境变量执行node_modules/.bin/webpack --config webpack-production.config.js即 webpack-production.config.js产出编译后的 bundlepack:platform调用 electron-packagerelectron-packager依赖版本 ^12.2.0按当前平台getTarget()依据process.platform映射为osx/win/linux打包arch 固定为x64Electron 版本取自pkg.config.electron-version4.2.12并设置asar: false、prune: true、overwrite: true输出目录统一为distpre-buildcompilepack:platform即仅生成可执行文件。执行grunt pre-build后产物位于项目根目录的dist目录。由于应用未经签名自动更新功能不会生效——这一点与入口文件 index.js 的实现吻合Windows 下 Squirrel 的--squirrel-install/--squirrel-updated/--squirrel-uninstall等事件依赖Update.exe完成快捷键创建与移除未签名的构建不具备完整的更新器支持。如果你确有发布需要可以在此基础上对可执行文件补充 codesignmacOS或 authenticodeWindows签名。签名凭据来自secret/auth_code.json含OSX_COMMON_NAME与WIN_CERT_PASSWORD字段gruntfile.js 在读取该文件失败ENOENT时会打印警告secret/auth_code.json is not found. CodeSigning is not available.但不会中断构建codesign任务仅在 macOS 平台执行Windows 安装包则由grunt-electron-installer的create-windows-installer任务配合secret/authenticode_cer.p12证书生成。五、制作自己的 Linux 发行包deb / rpm在 Linux 平台如 Ubuntu、Fedora执行grunt build即可生成发行包。注意在单一环境中可以同时生成.deb和.rpm两种格式无需分别准备系统。从 gruntfile.js 的build任务Linux 分支可见其完整链路compile → pack:linux → electron-installer-debian → electron-installer-redhat其中 deb 打包配置electron-installer-debian为name: boostnote、arch: amd64、categories: [Development, Utility]、可执行文件名bin: Boostnoterpm 打包配置electron-installer-redhat对应arch: x86_64其余元数据一致。第 1 步安装 Node/npm 后安装构建依赖包$ yarn add --dev grunt-electron-installer-debian grunt-electron-installer-redhat这两个插件在 package.json 中已被列为optionalDependencies版本分别约为 ^0.5.0 与 ^0.3.1但建议按文档显式安装以确保可用。第 2 步安装系统级打包工具Ubuntu/Debian$ sudo apt-get install -y rpm fakerootFedora$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot第 3 步执行完整构建$ grunt build构建完成后在dist目录中即可找到生成的.deb与.rpm安装包。六、构建注意事项小结回顾整个构建流程有几个容易踩坑的要点值得单独强调版本对齐Node 8.x / npm 6.x 是文档声明的基线过高或过低的 Node 版本可能与本仓库依赖webpack 1.x、grunt 0.4.x不兼容HMR 局限修改组件 constructor 或新增 CSS 类时需手动刷新应用这是 CSS Modules 在 constructor 阶段重写类名导致的固有限制默认 grunt 任务包含签名请优先使用grunt pre-build产出未签名可执行文件避免因缺少secret/auth_code.json与证书导致流程失败自动更新依赖签名dist中的未签名产物无法使用自动更新如需分发请自行完成 codesign / authenticodeLinux 打包依赖系统工具.deb与.rpm的生成分别依赖fakeroot、rpmDebian 系或dpkg、rpm-buildRed Hat 系需提前通过包管理器安装。如需查阅其他语言版本的本篇构建文档仓库内已提供对应翻译简体中文版、繁体中文版、日文版、韩文版、俄文版、法文版、葡萄牙文版 与 德文版。【免费下载链接】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），仅供参考