uBlock uBOLiteMV3CodeMirror 6 打包重建指南构建步骤、产物打包与源码消费链【免费下载链接】uBlockuBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.项目地址: https://gitcode.com/GitHub_Trending/ub/uBlock本篇以 platform/mv3/extension/lib/codemirror/README.md 为核心讲解如何为 uBlock 的 MV3 版本 uBOLite 重建唯一的代码编辑器依赖cm6.bundle.ubol.min.js文中完整保留了官方 README 的 submodule 初始化与 npm 构建六步流程并结合 tools/make-mv3.sh、platform/mv3/extension/dashboard.html 及各编辑器模块源码说明该产物在打包阶段如何被复制进最终扩展包、在运行时又被哪些功能消费。读完后你可以独立完成 bundle 重建并理解它在整条 MV3 构建链路中的位置。一、这份 README 解决什么问题cm6.bundle.ubol.min.js的来源platform/mv3/extension/lib/codemirror/README.md 的正文只围绕一件事说明platform/mv3/extension/lib/codemirror/目录下的cm6.bundle.ubol.min.js这个文件是从哪里来的、如何重新构建它。该目录当前包含三类内容README.md即这份构建说明codemirror.LICENSECodeMirror 的 MIT 许可证Copyright 2018–2021Marijn Haverbeke and others见 codemirror.LICENSEcodemirror-ubol/Git submodule 挂载点。关键点在于codemirror-ubol/目录在浅层检出时是空的。它对应 .gitmodules 中定义的子模块[submodule platform/mv3/extension/lib/codemirror/codemirror-ubol] path platform/mv3/extension/lib/codemirror/codemirror-ubol url codemirror-ubol作者的定制仓库README 进一步说明进入该目录后你所在的仓库是一个定制化的 fork其上游是RPGillespie6/codemirror-quickstart项目CodeMirror 6 的官方快速入门/打包工程。也就是说uBlock 并不是直接使用官方 CodeMirror 6 的发布产物而是维护了一个 fork以便按自身需求裁剪与封装出单文件的cm6.bundle.ubol.min.js。从源码结构看这种“单文件 bundle”的用法与主扩展形成鲜明对比主扩展uBlock Origin的页面如 src/1p-filters.html、src/asset-viewer.html 加载的是 CodeMirror 5 的多文件结构lib/codemirror/lib/codemirror.js加 comment、fold、search、hint 等十余个 addon 脚本而 MV3 的 uBOLite 则只加载一个预打包的 CM6 文件。可以推断MV3 平台对脚本加载方式的限制促使 uBOLite 采用了“一次打包、单文件引入”的策略这正是本 README 所描述的 bundle 存在的意义。二、重建cm6.bundle.ubol.min.js官方六步流程以下命令序列完整继承自原 README“command line from repo root”即从仓库根目录开始执行# 1. 从仓库根目录初始化 codemirror-ubol 子模块 git submodule init platform/mv3/extension/lib/codemirror/codemirror-ubol # 2. 进入子模块目录 cd platform/mv3/extension/lib/codemirror/codemirror-ubol/ # 此时已进入从 codemirror-quickstart fork 出的定制仓库 # 3. 安装依赖 npm install # 4. 执行构建 npm run build构建完成后的两个结果README 中均有明确表述cm6.bundle.ubol.min.js会出现在子模块的dist目录中即platform/mv3/extension/lib/codemirror/codemirror-ubol/dist/该文件正是当前目录platform/mv3/extension/lib/codemirror/下同名文件的来源——即 MV3 扩展实际引用的 bundle 由这次构建产出。补充两点与仓库上下文一致的说明platform/mv3/README.md 给出的完整 MV3 构建流程中git submodule init之后紧跟git submodule update才会真正拉取子模块内容若你只想重建 bundle 而不做完整扩展构建需自行确保子模块工作区已检出后再执行npm install/npm run build。由于codemirror-ubol是 fork 自 codemirror-quickstart 的工程npm run build走的是其 quickstart 构建脚本产物路径固定为dist/这一点与后续打包脚本的预期路径严格对应见下节。三、产物去向tools/make-mv3.sh如何把它打进最终扩展包重建出的 bundle 并非直接可用而是由 MV3 打包脚本消费。tools/make-mv3.sh 中有一段专门的库文件复制逻辑# Libraries mkdir -p $UBOL_DIR/lib/codemirror cp platform/mv3/extension/lib/codemirror/* \ $UBOL_DIR/lib/codemirror/ 2/dev/null || : cp platform/mv3/extension/lib/codemirror/codemirror-ubol/dist/cm6.bundle.ubol.min.js \ $UBOL_DIR/lib/codemirror/ cp platform/mv3/extension/lib/codemirror/codemirror.LICENSE \ $UBOL_DIR/lib/codemirror/ cp platform/mv3/extension/lib/codemirror/codemirror-ubol/LICENSE \ $UBOL_DIR/lib/codemirror/codemirror-quickstart.LICENSE这段代码印证了 README 所说的构建链路打包时脚本强制从子模块的dist/目录复制cm6.bundle.ubol.min.js到最终包的lib/codemirror/第 120–121 行。注意该复制行没有|| :容错后缀——若 bundle 不存在构建会直接失败这正是“必须先成功执行npm run build”的硬性约束许可证文件同步复制CodeMirror 本体的 codemirror.LICENSE 保留原名而 fork 仓库自带的LICENSE则改名为codemirror-quickstart.LICENSE区分上游 quickstart 工程的版权说明按 platform/mv3/README.md最终扩展包落在dist/build/uBOLite.[platform]platform 为 chromium、edge、firefox 或 safaribundle 随包内lib/codemirror/一同分发。四、运行时消费self.cm6全局 API 与它的调用方platform/mv3/extension/dashboard.html 在页面末尾以经典脚本方式加载 bundle且先于所有业务模块脚本script srclib/codemirror/cm6.bundle.ubol.min.js/script script srcjs/theme.js typemodule/script script srcjs/dashboard.js typemodule/script script srcjs/develop.js typemodule/script由此可以推断该 bundle 向全局暴露了一个封装对象cm6供 MV3 扩展各编辑器模块调用。仓库中实际消费它的主要模块有platform/mv3/extension/js/develop.js自定义过滤器编辑面板的核心。调用cm6.createViewPanel()创建 I/O 与摘要面板cm6.createEditorView(viewConfig, ...)创建编辑器视图并用cm6.foldAll(view)、cm6.resetUndoRedo(view)、cm6.toggleReadOnly(view, ...)管理折叠、撤销历史与只读状态错误提示则通过cm6.lineErrorClear()与cm6.spanErrorClear()清理platform/mv3/extension/js/filter-editor.js网络过滤器编辑器同样依赖cm6.createViewPanel()/cm6.createEditorView()/cm6.resetUndoRedo()platform/mv3/extension/js/dnr-editor.js声明式网络请求规则编辑器用cm6.lineErrorAdd()、cm6.spanErrorAdd()标注坏规则并用cm6.findAll()做编辑器内检索platform/mv3/extension/js/rw-dnr-editor.js 与 platform/mv3/extension/js/mode-editor.js分别是 read/write DNR 规则编辑器与模式编辑器同样复用createViewPanel、foldAll、lineErrorAdd等 API。综合这些调用点从源码结构看这个定制化 bundle 并非 CodeMirror 6 的“原样打包”而是叠加了一层 uBlock 专用封装编辑器视图创建、工具面板、错误行/片段高亮、全文查找、折叠与撤销历史重置等能力都被收敛进cm6命名空间供 MV3 侧五个编辑器页面以统一接口使用。这也解释了为什么上游是 quickstart 工程的 fork——官方 quickstart 只负责把 CM6 打成 bundle而 uBlock 需要的错误标注与面板集成必须在其构建基础上定制。五、验证与排查建议执行 README 流程后可按以下顺序验证产物与链路是否完整确认platform/mv3/extension/lib/codemirror/codemirror-ubol/子模块工作区非空空目录即git submodule init未生效或未git submodule update确认platform/mv3/extension/lib/codemirror/codemirror-ubol/dist/cm6.bundle.ubol.min.js已生成——这是 tools/make-mv3.sh 第 120–121 行复制动作的源文件缺失会导致打包失败如需完整走通 MV3 构建make mv3-[platform]按 platform/mv3/README.md 的前提准备环境完整流程还要求 Node.js 17.5.0 及以上且构建期间会从远程服务器下载过滤列表数据注意不要混淆两套 CodeMirrorsrc/lib/codemirror/下是主扩展使用的 CodeMirror 5 多文件库供 src/1p-filters.html、src/advanced-settings.html、src/code-viewer.html 等页面使用与本 README 讨论的 MV3 侧 CM6 单文件 bundle 相互独立重建 bundle 不会也不应影响前者。小结这份简短的 README 定义了 uBOLiteMV3编辑器体验的“单一依赖”cm6.bundle.ubol.min.js由codemirror-ubol子模块codemirror-quickstart 的定制 fork经npm installnpm run build产出再由 tools/make-mv3.sh 连同两份许可证文件复制进各平台最终包运行时由 dashboard.html 加载并通过全局cm6API 支撑自定义过滤器、动态网络规则等多个编辑器界面。掌握这六步构建命令与上述打包、消费链路即可独立完成该 bundle 的重建与验证。【免费下载链接】uBlockuBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.项目地址: https://gitcode.com/GitHub_Trending/ub/uBlock创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考