Void 项目 Monaco Editor 发行版冒烟测试指南从打包构建到浏览器端自动化验证【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void本文面向需要在 Void 开源仓库README.md 所示中验证 Monaco Editor 分发产物正确性的开发者围绕 test/monaco/README.md 展开该目录承载的是对 Monaco Editor 发行版distribution的冒烟测试smoke test脚本。读完本文你将掌握其完整的构建链路npm 安装 → webpack 打包 → TypeScript 编译 → 浏览器端测试理解测试运行器如何驱动 Chromium/Firefox 无头浏览器做端到端断言并学会自行复现与扩展这套验证流程。一、测试目录定位为什么需要针对发行版做冒烟测试Monaco Editor 是 VS Code以及本仓库派生项目 Void中代码编辑器的核心组件。在常规开发过程中源码经过多层编译、摇树tree-shaking、i18n 抽取与打包后才成为可供外部消费的分发产物任何一个环节出错都可能导致编辑器在浏览器中无法启动或行为异常。test/monaco目录的作用就是在发行版产物之上执行冒烟测试——它不直接运行仓库内的 TS 源码而是先经由 webpack 将编译产物打包成浏览器可直接加载的 bundle再用真实浏览器跑一遍核心编辑操作聚焦、输入、撤销、多光标从外部消费者的视角确认装好的编辑器真的能用。从目录结构看test/monaco/该测试包由package.json构建脚本入口、webpack.config.js打包配置、core.js浏览器端实例化脚本、monaco.test.tsPlaywright 断言用例、runner.js测试运行器以及esm-check/ESM 分发校验六部分组成各自职责在下文逐一拆解。二、安装与构建四条核心命令的完整链路test/monaco/README.md 给出的流程可归纳为安装 → 打包 → 编译 → 测试四个阶段对应 test/monaco/package.json 中声明的脚本# 1. 在 test/monaco 目录下安装依赖 npm i # 2. 用 webpack 把 Monaco 核心与 worker 打成浏览器 bundle npm run bundle # 3. 用 TypeScript 编译器把测试用例编译为 JS npm run compile # 4. 启动本地服务器并运行浏览器端冒烟测试 npm run test其中bundle脚本实际执行的是bundle-webpackbundle-webpack: node ../../node_modules/webpack/bin/webpack --config ./webpack.config.js --bail注意bundle在 package.json 中虽未单独列出但 README 的npm run bundle即对应上述bundle-webpack语义——执行时带--bail参数一旦出现打包错误立即以非零码退出保证 CI 场景下失败能被及时捕获。compile与test脚本分别对应compile: node ../../node_modules/typescript/bin/tsc, test: node runner.jscompile复用仓库根目录node_modules下的 TypeScript 编译器通过相对路径../../node_modules/typescript/bin/tsc引用依据 test/monaco/tsconfig.json 将monaco.test.ts编译到out/目录test则由 runner.js 接管后续所有流程。需要说明的是README 中的npm run bundle写法是文档层面的别名描述仓库内实际声明为bundle-webpack两者指向同一命令运行效果一致。三、webpack 打包配置bundle 里到底打了什么test/monaco/webpack.config.js 定义了测试用 bundle 的构建规则是理解整个冒烟测试物料的关键module.exports { mode: production, entry: { core: ./core.js, editorWebWorkerMain: ../../out-monaco-editor-core/esm/vs/editor/common/services/editorWebWorkerMain.js, }, output: { globalObject: self, filename: [name].bundle.js, path: path.resolve(__dirname, ./dist) }, ... resolve: { alias: { monaco-editor-core: path.resolve(__dirname, ../../out-monaco-editor-core/esm/vs/editor/editor.main.js), } }, ... };其关键设计如下双入口打包core入口是测试页脚本 core.jseditorWebWorkerMain入口则是 Monaco 编辑器的 Web Worker 主脚本来自out-monaco-editor-core的 ESM 产物。两者分别产出dist/core.bundle.js与dist/editorWebWorkerMain.bundle.js编辑器主线程与后台 Worker 各司其职。别名替换monaco-editor-core被显式重定向到out-monaco-editor-core/esm/vs/editor/editor.main.js——这是仓库内通过构建任务生成的 Monaco 核心 ESM 入口确保测试打的是当前仓库自己的产物而非 npm 上外部的 Monaco 包。生产模式 告警即错误mode: production启用压缩与优化同时挂载WarningsToErrorsPlugin把所有 webpack 告警提升为编译错误杜绝带伤发布。此外配置中特意关闭了minimize: false并注释说明这是为了避免 CI 上触发的 webpack 压缩 bug。资源处理.css经style-loader/css-loader内联进 bundle字体文件woff2/ttf/eot/svg通过file-loader抽取到dist/fonts/目录。out-monaco-editor-core目录由仓库构建任务产出其上游定义见 build/gulpfile.editor.jsextract-editor-src任务以vs/editor/editor.main、vs/editor/editor.worker.start、vs/editor/common/services/editorWebWorkerMain为入口点抽取独立编辑器的源码compile-editor-esm任务将其编译为 ESM 并输出到out-monaco-editor-core/esm。也就是说运行本目录测试前需先确保该产物已生成通常由仓库根目录的编辑器构建任务链完成。四、浏览器端测试载体 core.jsworker 配置与编辑器实例test/monaco/core.js 是打包进dist/core.bundle.js的页面脚本承担两件事1. 配置 Monaco 的 Worker 加载路径self.MonacoEnvironment { getWorkerUrl: function (moduleId, label) { return ./editorWebWorkerMain.bundle.js; } };通过MonacoEnvironment.getWorkerUrl告诉编辑器所有语言 Worker 都使用打包好的editorWebWorkerMain.bundle.js从而避免在测试页里重复加载/远程拉取 Worker 脚本。2. 创建真实编辑器实例window.instance monaco.editor.create(document.getElementById(container), { value: [ from banana import *, , class Monkey:, # Bananas the monkey can eat., capacity 10, def eat(self, N):, \\\Make the monkey eat N bananas!\\\, capacity capacity - N*banana.size, , def feeding_frenzy(self):, eat(9.25), return Yum yum, ].join(\n), language: python });编辑器实例被挂到window.instance上这样测试用例就能通过page.evaluate在浏览器上下文里直接调用实例 APIfocus()、trigger()、getModel()等来驱动和断言编辑器行为。初始内容选用了一段多行 Python 代码覆盖空行、缩进、字符串、注释等常见排版场景便于后续断言编辑结果。五、测试运行器 runner.js本地服务器 双浏览器驱动test/monaco/runner.js 是npm test的入口其执行流程为用yaserver在127.0.0.1:8563端口启动静态文件服务器根目录为test/monaco本身使dist/、out/下的产物可通过 HTTP 访问服务器就绪后依次在Chromium和Firefox两个浏览器上运行 Mocha 测试webkit被注释停用function runTest(browser) { return new Promise((resolve, reject) { const proc cp.spawn(node, [../../node_modules/mocha/bin/mocha, out/*.test.js, --headless], { env: { BROWSER: browser, ...process.env }, stdio: inherit }); ... }); }测试通过则打印All good并以退出码 0 结束否则打印错误并以非零码退出——该退出码可被 CI 直接消费。这里体现了两个关键设计一是通过环境变量BROWSER把当前要测哪个浏览器传给 Mocha 进程二是--headless参数让 Playwright 以无头模式启动浏览器无需显示环境即可在 CI 上运行。六、断言用例剖析monaco.test.ts 验证了哪些行为test/monaco/monaco.test.ts 是核心断言文件它先用 Playwright 启动浏览器BROWSER环境变量决定类型默认chromium再打开http://127.0.0.1:8563/dist/core.html测试页随后执行三个用例1. 全局隔离性检查——typeof monaco必须为undefined。这验证打包后的 bundle 没有把 Monaco 意外暴露为全局变量是正确打包、正确隔离的重要信号。2. 聚焦输入与撤销——模拟真实键盘操作instance.focus(); instance.trigger(keyboard, cursorHome); instance.trigger(keyboard, type, { text: a });断言第一行从from banana import *变为afrom banana import *光标归位后输入a随后执行instance.getModel().undo()断言内容恢复原样。这条用例同时验证了编辑器核心编辑管线键盘命令路由、光标移动、文本插入、撤销栈在打包产物中工作正常。3. 多光标批量编辑——连续 5 次触发editor.action.insertCursorBelow创建多光标再统一输入#断言 7 行内容均被正确加注释末尾不含#的字符串行除外。该用例覆盖了多光标同步编辑这类较复杂的编辑器特性。此外每个用例前后还会收集页面pageerror事件任何未捕获的浏览器端异常都会在afterEach中被重新抛出导致测试失败——这意味着控制台报错本身就视为测试不通过进一步保证了发行版无运行时告警。七、ESM 分发专项校验esm-check 在验证什么除 webpack bundle 外Monaco 还对外发布 ESM 模块形态的产物因此 test/monaco/esm-check/esm-check.js 专门对 ESM 分发做冒烟验证抽取 ESM 源码并剥离 CSS 导入递归复制out-monaco-editor-core/esm下所有.js文件到./out并用正则import [^]\.css;剔除 CSS 导入浏览器原生 ESM 无法直接处理 CSS import剥离后才可直接加载启动本地静态服务器端口 8562用 Playwright 的 Chromium 无头模式访问index.html校验响应状态码为 200且页面加载过程无pageerror一旦出错立即打印[esm-check] A page error occurred并退出码 1。对应的测试页 test/monaco/esm-check/index.html 以script typemodule srcindex.js方式加载 test/monaco/esm-check/index.js后者直接import * as monaco from ./out/vs/editor/editor.main.js并创建编辑器。整个链路验证了ESM 分发产物可被原生模块系统加载并正常实例化编辑器。该检查由esm-check脚本触发node esm-check/esm-check.js。八、运行前提与注意事项基于源码整理运行本测试目录需要满足以下前提上游产物已生成webpack 的 alias 与 ESM 检查都依赖out-monaco-editor-core/esm目录需先通过仓库编辑器构建任务参见 build/gulpfile.editor.js 的extract-editor-src/compile-editor-esm生成依赖完整npm i需安装chai、types/chai、warnings-to-errors-webpack-plugin等 devDependencies运行器还依赖yaserver、mocha、playwright/testmonaco.test.ts 中 import以及仓库根目录 node_modules 下的webpack、typescript浏览器可用Playwright 需要对应浏览器内核可用无头模式下不要求图形界面适配 CI端口占用测试固定使用 8563bundle 测试与 8562esm-check两个本地端口运行前应确认未被占用tsconfig 约束test/monaco/tsconfig.json 以commonjs模块、es2016目标、strict模式编译测试代码lib同时包含esnext与dom且排除了node_modules、out、tools目录。九、小结test/monaco是一套麻雀虽小、五脏俱全的发行版冒烟测试体系webpack 双入口打包出编辑器 worker的运行物料core.js负责在真实 DOM 中实例化编辑器runner.js用本地静态服务器配合 Mocha Playwright 在 Chromium 与 Firefox 上跑通输入、撤销、多光标等核心交互断言esm-check再补上对原生 ESM 分发形态的加载验证。对于希望在 Void 项目中确认 Monaco 分发产物可用的开发者这套流程既是质量闸门也是理解 Monaco 构建产物形态的最佳样例。若要在本地复现只需在 test/monaco 目录依次执行npm i、npm run bundle、npm run compile、npm run test若需扩展覆盖范围可在 monaco.test.ts 中新增it(...)用例断言编辑器 API 行为或在 runner.js 的runTests中放开webkit以加入更多浏览器矩阵。【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
