ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Azure Data Studio 仓库中 monaco-editor-core 的发布流程全指南:从 monaco.d.ts 生成到 npm publish

Azure Data Studio 仓库中 monaco-editor-core 的发布流程全指南:从 monaco.d.ts 生成到 npm publish 数据库客户端桌面应用数据分析【免费下载链接】azuredatastudioAzure Data Studio is a data management and development tool with connectivity to popular cloud and on-premises databases. Azure Data Studio supports Windows, macOS, and Linux, with immediate capability to connect to Azure SQL and SQL Server. Browse the extension library for more database support options including MySQL, PostgreSQL, and MongoDB.项目地址https://gitcode.com/gh_mirrors/az/azuredatastudio点击查看免费下载本指南以仓库 build/monaco/README.md 为骨架完整讲解 Azure Data Studio基于 VS Code / Monaco 内核中monaco-editor-core独立包的发布流程如何自动生成monaco.d.ts、如何正确升级版本号、如何通过gulp editor-distro产出可供 npm 发布的发行目录并最终执行npm publish。读者学完后将能独立完成一次 monaco 编辑器核心的版本发布并理解发行目录中 ESM 源码、类型声明、min 产物与 sourcemap 是如何被组装出来的。一、发布前置理解什么是 monaco-editor-core在动手发布之前需要先明确产物定位。monaco-editor-core是 Monaco Editor即驱动 VS Code 及 Azure Data Studio 的代码编辑器的核心编辑功能模块它只包含编辑器内核不捆绑各语言的语法支持。在 build/monaco/README-npm.md 中对该模块有明确定位说明该 npm 模块是monaco-editor这个完整包的构建基石除非你在做特殊的事例如编写一个可以独立发布、独立被消费的 Monaco 语言包否则建议直接消费monaco-editor包因为该包内含本模块并额外叠加了语言支持。对应地仓库内的 build/monaco/package.json 中声明了该包的元数据{ name: monaco-editor-core, private: true, version: 0.0.0, description: A browser based code editor, author: Microsoft Corporation, license: MIT, typings: ./esm/vs/editor/editor.api.d.ts, module: ./esm/vs/editor/editor.main.js }注意三个关键点version在源仓库中恒为占位符0.0.0真正的版本号在发布流程第 2 步手动提升private: true是源码仓库中的标记构建流程final-editor-resources会将其改写为false使其可被发布module入口指向esm/vs/editor/editor.main.jstypings指向esm/vs/editor/editor.api.d.ts两者都是构建阶段才生成的文件。二、发布流程总览原文档给出了一条精炼的四步发布路径本文将其展开为可执行的完整流程生成 monaco.d.ts——运行gulp watch类型声明文件在构建中自动产生提升版本号——修改build/monaco/package.json中的version生成 npm 发行内容——确认全部改动已提交并推送到远程后运行gulp editor-distro生成物中包含 HEAD 的 SHA必须保证该提交在远程可用发布——进入输出目录out-monaco-editor-core并执行npm publish。下面逐节详解每一步的机制与注意事项。三、第一步生成 monaco.d.ts3.1 自动化机制原文档明确指出monaco.d.ts现在已无需手动维护在运行gulp watch时会自动生成。它对应的产物文件是仓库根目录下的 src/vs/monaco.d.ts该文件由build/lib/monaco-api.js驱动生成。其生成逻辑的核心在 build/monaco/monaco.d.ts.recipe这是一份配方文件通过#include(...)与#includeAll(...)指令把分散在vs/各模块中的类型声明按命名空间组装成一份完整的声明文件。以monaco.editor命名空间为例配方中可见declare namespace monaco.editor { #include(vs/editor/browser/widget/diffNavigator): IDiffNavigator #includeAll(vs/editor/standalone/browser/standaloneEditor;languages.TokenToken): ... //compatibility: export type IReadOnlyModel ITextModel; export type IModel ITextModel; }这份配方文件还声明了全局环境接口MonacoEnvironmentgetWorker、getWorkerUrl、baseUrl、globalAPI等字段以及monaco、monaco.editor、monaco.languages、monaco.worker四个顶层命名空间文件末尾的//dtsv3是配方版本标记。3.2 生成失败时的守护生成流程并非静默完成。在 build/lib/compilation.js 中可以看到monaco.d.ts的生成是构建的硬性前置条件若生成失败构建会抛出monaco.d.ts generation error - Cannot continue错误直接终止若生成结果与已提交文件不一致会报出monaco.d.ts is no longer up to date. Please run gulp watch and commit the new file.的提示——即提醒开发者重新跑gulp watch并提交更新后的声明文件。3.3 类型检查与 watch 任务在 build/gulpfile.editor.js 中还定义了monaco-typecheck与monaco-typecheck-watch两个 gulp 任务它们通过tsc -p ./src/tsconfig.monaco.json --noEmit对 monaco 独立编译环境做类型检查。其中 watch 版本createTscCompileTask(true)传入-w参数会持续监听文件变化并即时反馈error TSxxxx类型的编译错误。虽然根目录 gulpfile.js 的watch任务默认注释掉了monacoTypecheckWatchTask但开发者按需开启即可在编辑期间获得 monaco 侧的类型守护。四、第二步提升版本号发布版本号的位置是 build/monaco/package.json 中的version字段当前为占位符0.0.0。发布者需要将version改为符合 semver 语义的目标版本如0.34.0将该改动随发布提交一起git commit并推送。版本号会被gulp editor-distro的final-editor-resources阶段继承构建流程读取该package.json仅把private改写为false其余字段含版本号、入口、typings 指向原样写入发行目录的package.json中见 build/gulpfile.editor.js。因此版本号必须在构建前就确定好并提交而不是等构建后再改。五、第三步运行 gulp editor-distro 生成 npm 发行内容5.1 硬性前提所有改动已提交并推送原文档特别强调必须确保所有更改已经提交并推送到远程因为生成的发行文件中包含 HEAD 的 sha而该 sha 需要能在远程仓库查到发行目录内的version.txt会写入指向该提交的链接。若在本地提交尚未推送时发布生成的产物将携带一个远程不存在的提交引用导致产物溯源信息失效。5.2 editor-distro 任务的完整流水线editor-distro定义在 build/gulpfile.editor.js是一条由多阶段任务串联组成的流水线util.rimraf(清理 out-editor-src / out-editor-build / out-editor-esm / out-monaco-editor-core / out-editor / out-editor-min) ← 并行清理 ↓ extractEditorSrcTask ← 抽取独立编辑器源码 ↓ 并行 分支 AAMD 发行版: compileEditorAMDTask → optimizeEditorAMDTask → minifyEditorAMDTask 分支 BESM 发行版: createESMSourcesAndResourcesTask → compileEditorESMTask → appendJSToESMImportsTask ↓ finalEditorResourcesTask ← 组装最终 npm 包各阶段职责如下并行清理一次性删除六个out-*中间目录保证每次构建从干净状态开始extractEditorSrcTask从整个 VS Code 源码中抽取 Monaco 独立编辑器所需的源码子集分支 AAMD依次完成编译、优化与压缩产出out-editor与out-editor-min分支 BESM先通过createESMSourcesAndResourcesTask把源码转换到out-monaco-editor-core/esm见 build/gulpfile.editor.js其中会忽略vs/loader.js等加载器文件再用 tsc 编译为 ESM 模块最后执行appendJSToESMImportsTask。appendJSToESMImportsTaskbuild/gulpfile.editor.js是一个值得注意的细节它遍历out-monaco-editor-core/esm下所有.js文件把形如import ... from xxx与export * from xxx的语句统一改写为带.js后缀的形式import$1$2.js从而保证 ESM 导入在浏览器与打包器中的合规性。5.3 final-editor-resources组装 npm 包的最后一步最终发行目录out-monaco-editor-core的内容由finalEditorResourcesTaskbuild/gulpfile.editor.js组装它同时并行完成多路复制与改写产物来源处理方式LICENSE、ThirdPartyNotices.txtbuild/monaco/LICENSE、build/monaco/ThirdPartyNotices.txt原样复制monaco.d.tssrc/vs/monaco.d.ts原样复制到包根目录esm/vs/editor/editor.api.d.tssrc/vs/monaco.d.ts经toExternalDTS改写为 ESM 兼容的外部声明package.jsonbuild/monaco/package.json解析后把private置为false再写回version.txtbuild/monaco/version.txt写入monaco-editor-core: 仓库/tree/sha1形式的提交溯源README.mdbuild/monaco/README-npm.md重命名为README.md后复制dev/out-editor/**AMD 版产物原样放入 dev 目录min/out-editor-min/**过滤掉.js.map、nls.metadata.json、bundleInfo.json并重写sourceMappingURL指向min-mapsmin-maps/out-editor-min/**中的.js.map仅保留 sourcemap 文件其中两个改写逻辑值得展开toExternalDTS类型声明 ESM 化定义在 build/gulpfile.editor.js它把declare namespace monaco {这一全局命名空间写法剥离将declare namespace monaco.xxx {改写为export namespace并把declare let MonacoEnvironment重写为declare global { let MonacoEnvironment: Environment | undefined; }——这样生成出的editor.api.d.ts才能作为标准 ESM 模块的类型声明被 TypeScript 正确解析。min 目录的 sourceMappingURL 重写见 build/gulpfile.editor.js压缩后的 JS 中原本内联的 sourcemap 引用会被替换为相对min-maps目录的相对路径例如//# sourceMappingURL../min-maps/vs/editor/editor.main.js.map从而保证线上调试时 sourcemap 可被正确加载。5.4 验证发行包monaco.webpack.config.js 与 esm.core.js发行目录是否可用可通过仓库自带的两个文件交叉验证build/monaco/esm.core.js 是 webpack 打包的入口示例它import * as monaco from monaco-editor-core配置MonacoEnvironment.getWorkerUrl返回./editor.worker.bundle.js并调用monaco.editor.create渲染一段 JavaScript 示例代码build/monaco/monaco.webpack.config.js 则通过alias把monaco-editor-core指向out-monaco-editor-core/esm/vs/editor/editor.main.js并以core与editor.worker两个入口打出dist/core.bundle.js与dist/editor.worker.bundle.js。也就是说本地即使不真正发布到 npm也可以借助这份 webpack 配置在仓库内对 ESM 发行产物做一次完整打包冒烟验证。六、第四步发布到 npm发行目录就绪后执行发布cd out-monaco-editor-core npm publish发布前建议自行核查out-monaco-editor-core/package.json中version是否为目标版本、private是否为false根目录的monaco.d.ts与esm/vs/editor/editor.api.d.ts是否已生成version.txt中的提交 SHA 是否已在远程仓库可见若发布的是新的大版本注意核对 build/monaco/package.json 中typings与module指向的文件确实存在于发行目录中。需要说明的是npm publish本身需要 npm 账号与对应包名的发布权限这属于账号与 npm 侧的配置不在仓库代码范围内。七、常见问题与排查要点monaco.d.ts未更新构建报monaco.d.ts is no longer up to date时重新运行gulp watch让声明文件自动重新生成并提交变更见 build/lib/compilation.js。ESM 导入缺.js后缀appendJSToESMImportsTask会统一补全若你在out-monaco-editor-core/esm中手工改动文件后重新构建务必让该任务重新执行否则可能产生浏览器无法解析的裸导入。版本号丢失或仍为 0.0.0检查是否在修改 build/monaco/package.json 的version之前就运行了editor-distro版本号必须在构建前改好。发行目录内容与预期不符对照 5.3 节的产物清单逐项核对特别是min目录的 sourcemap 引用与version.txt的提交信息。八、结语monaco-editor-core的发布流程虽然只有四步但背后是仓库中一条完整、自动化的构建流水线monaco.d.ts由gulp watch依据 build/monaco/monaco.d.ts.recipe 自动拼装版本号在 build/monaco/package.json 中控制gulp editor-distro负责把 AMD、ESM、min 与 sourcemap 各类产物组装进out-monaco-editor-core最终由npm publish推向公共 registry。理解这条链路不仅是发布维护者所需也能帮助二次开发 Monaco 语言包、深度定制编辑器的开发者更清楚地知道每一份发行文件的来源与用途。赞分享数据库客户端桌面应用数据分析【免费下载链接】azuredatastudioAzure Data Studio is a data management and development tool with connectivity to popular cloud and on-premises databases. Azure Data Studio supports Windows, macOS, and Linux, with immediate capability to connect to Azure SQL and SQL Server. Browse the extension library for more database support options including MySQL, PostgreSQL, and MongoDB.项目地址https://gitcode.com/gh_mirrors/az/azuredatastudio点击查看免费下载相关推荐发布 monaco-editor-core 新版本从 monaco.d.ts 生成到 npm publish 的完整流水线发布 monaco editor core 新版本从 monaco.d.ts 生成到 npm publish 的完整流水线 导读 本文基于仓库 build/m代码编辑器开发工具AI Agent人工智能VS Code 仓库中 monaco-editor-core 发布全流程从 gulp editor-distro 到 npm publishVS Code 仓库中 monaco editor core 发布全流程从 gulp editor distro 到 npm publish 本文以 VS C开发工具代码编辑器Azure Data Studio 中的 Monaco 编辑器核心 npm 包monaco-editor-core 的定位、结构、消费与发布全解析Azure Data Studio 中的 Monaco 编辑器核心 npm 包monaco editor core 的定位、结构、消费与发布全解析 本篇技术指数据库客户端桌面应用数据分析上一篇游戏存档备份终极指南用Ludusavi守护你的珍贵游戏进度下一篇GHelper终极指南3分钟掌握华硕笔记本性能调校秘籍创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表