ARTICLE DETAIL

资讯详情

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

发布 monaco-editor-core 新版本:从 monaco.d.ts 生成到 npm publish 的完整流水线

发布 monaco-editor-core 新版本:从 monaco.d.ts 生成到 npm publish 的完整流水线 发布 monaco-editor-core 新版本从 monaco.d.ts 生成到 npm publish 的完整流水线【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void导读本文基于仓库 build/monaco/README.md 发布的版本发布流程文档完整讲解在 VS Code 系代码库中发布monaco-editor-corenpm 包的四个核心阶段自动生成monaco.d.ts、提升版本号、通过gulp editor-distro生成 npm 发布内容、以及最终的npm publish。同时结合 build/gulpfile.editor.js 的底层任务实现剖析每个步骤背后真实的构建链路源码提取、ESM 编译、类型声明转换、资源打包使读者既能照单操作也能深入理解发布产物的构成原理。读完本文你将掌握 monaco 编辑器核心包从仓库源码到 npm 发布物的完整发布方法与相关构建机制。一、发布对象monaco-editor-core 是什么monaco-editor-core是 README-npm.md 中所描述的构建块模块——它承载 Monaco Editor 的核心编辑器能力编辑、光标、语法高亮基础设施、Worker 通信等是上层monaco-editornpm 模块的基础。官方建议除非你有特殊需求例如独立发布一个可单独消费的 Monaco 语言支持包否则应当消费包含语言支持的上层monaco-editor模块而非直接使用 core 包。查看 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 }注意两点关键信息源码仓库中的该package.json标记为private: true版本号为占位值0.0.0。发布流程中会由构建任务自动将其private置为false见下文最终资源打包版本号则需手动提升。typings指向./esm/vs/editor/editor.api.d.tsmodule指向./esm/vs/editor/editor.main.js——说明发布物是一个 ESM 形态的目录其中editor.api.d.ts正是由monaco.d.ts转换而来。整个发布流程围绕 build/monaco 目录展开该目录还包含LICENSE、ThirdPartyNotices.txt、version.txt发布时会被填充 HEAD sha 信息、monaco.d.ts.recipe类型声明生成模板与monaco.usage.recipetree-shaking 防护引用等配套文件。二、第一步生成 monaco.d.ts按 build/monaco/README.md 的说明monaco.d.ts现在会在运行gulp watch时自动生成。也就是说日常开发中只要你以 watch 模式运行构建gulp watch类型声明文件就会随源码变更自动重新生成无需手工执行单独步骤。这背后对应 build/gulpfile.editor.js 中定义的monacodtsgulp 任务gulp.task(monacodts, task.define(monacodts, () { const result monacoapi.execute(); fs.writeFileSync(result.filePath, result.content); fs.writeFileSync(path.join(root, src/vs/editor/common/standalone/standaloneEnums.ts), result.enums); return Promise.resolve(true); }));该任务调用monaco-api模块从源码提取公共 API 签名将生成的内容写入src/vs/monaco.d.ts并同步生成独立枚举文件standaloneEnums.ts。monaco.d.ts的生成模板位于 build/monaco/monaco.d.ts.recipe其核心机制是#include/#includeAll指令——将分散在src/vs各模块中的类型声明按命名空间聚合进monaco全局命名空间例如declare namespace monaco { #include(vs/platform/markers/common/markers): MarkerTag, MarkerSeverity #include(vs/base/common/cancellation): CancellationTokenSource, CancellationToken #include(vs/base/common/uri): URI, UriComponents #include(vs/editor/common/core/position): IPosition, Position #include(vs/editor/common/core/range): IRange, Range #include(vs/editor/common/core/selection): ISelection, Selection, SelectionDirection } declare namespace monaco.editor { #include(vs/editor/standalone/browser/standaloneCodeEditor): IActionDescriptor, IGlobalEditorOptions, IStandaloneEditorConstructionOptions, IStandaloneDiffEditorConstructionOptions, IStandaloneCodeEditor, IStandaloneDiffEditor #includeAll(vs/editor/common/config/editorOptions): } declare namespace monaco.languages { #includeAll(vs/editor/standalone/browser/standaloneLanguages;languages.;editorCommon.editor.;model.editor.;IMarkerDataeditor.IMarkerData): #includeAll(vs/editor/common/languages/languageConfiguration): }模板末尾的//dtsv3是声明文件版本标记。这种模板 符号白名单的方式保证了对外发布的类型声明只包含真正公开的 API而不暴露内部实现细节。三、第二步提升版本号发布前需要手动提升版本号位置是 build/monaco/package.json 中的version字段当前仓库中为占位值0.0.0。这个版本号在构建中具有实际作用查看 build/gulpfile.editor.js 顶部逻辑——const sha1 getVersion(root); const semver require(./monaco/package.json).version; const headerVersion semver ( sha1 ); const BUNDLED_FILE_HEADER [ /*!-----------------------------------------------------------, * Copyright (c) Microsoft Corporation. All rights reserved., * Version: headerVersion, * Released under the MIT license, *-----------------------------------------------------------*/, ].join(\n);semver直接读取build/monaco/package.json的versionsha1通过getVersion(root)获取当前仓库的 git HEAD 提交哈希二者拼接为headerVersion形如0.52.2(a1b2c3d...)写入每个产出文件的打包头部注释BUNDLED_FILE_HEADER。因此版本号不仅是 npm 的发布版本还会内嵌进构建产物文件头用于发布物与仓库源码提交的溯源对应。四、第三步生成 npm 发布内容4.1 前置条件提交并推送所有变更build/monaco/README.md 特别强调必须确保所有变更已提交并推送到远程仓库生成的产物中包含 HEAD sha且该 sha 在远程上应当可访问。这是发布流程的关键约束——上文提到headerVersion与version.txt都会携带 HEAD sha 信息若该提交只在本地而尚未推送发布物中的溯源信息在远程将无法解析。4.2 运行构建命令在仓库根目录执行gulp editor-distro该命令在 build/gulpfile.editor.js 中定义为任务序列gulp.task(editor-distro, task.series( task.parallel( util.rimraf(out-editor-src), util.rimraf(out-monaco-editor-core), ), extractEditorSrcTask, compileEditorESMTask, finalEditorResourcesTask ) );整个流水线分为四段下面逐一说明其职责。4.3 阶段一清理并提取编辑器源码extract-editor-src首先并行清空out-editor-src与out-monaco-editor-core两个输出目录然后执行extractEditorSrcTask其核心是standalone.extractEditor调用standalone.extractEditor({ sourcesRoot: path.join(root, src), entryPoints: [ vs/editor/editor.main, vs/editor/editor.worker.start, vs/editor/common/services/editorWebWorkerMain, ], inlineEntryPoints: [ apiusages, extrausages ], typings: [], shakeLevel: 2, // 0-Files, 1-InnerFile, 2-ClassMembers importIgnorePattern: /\.css$/, destRoot: path.join(root, out-editor-src), tsOutDir: ../out-monaco-editor-core/esm/vs, redirects: { vscode/tree-sitter-wasm: ../node_modules/vscode/tree-sitter-wasm/wasm/web-tree-sitter, } });这段代码揭示了发布物的裁剪原理以vs/editor/editor.main编辑器主入口、vs/editor/editor.worker.startWorker 启动入口、vs/editor/common/services/editorWebWorkerMainWeb Worker 主服务三个入口为根做依赖图提取inlineEntryPoints注入两类使用引用文件由monacoapi.execute().usageContent自动生成的 API 使用清单以及手工维护的 build/monaco/monaco.usage.recipeshakeLevel: 2表示按类成员粒度进行 tree shaking0文件级、1文件内部级、2类成员级配合monaco.usage.recipe中对CancellationTokenSource、Emitter、KeyCode、KeyMod、Position、Range、Selection、MarkerSeverity、Uri、editorAPI.editor、editorAPI.languages等公共 API 的显式引用防止这些导出符号被摇树优化误删源码输出到out-editor-srcTypeScript 输出目录指向../out-monaco-editor-core/esm/vs即最终的 npm 包esm/vs目录。4.4 阶段二编译为 ESMcompile-editor-esmcompileEditorESMTask对提取出的out-editor-src执行编译const compile compilation.createCompile(src, { build: true, emitError: true, transpileOnly: false, preserveEnglish: true }); return ( srcPipe .pipe(compile()) .pipe(i18n.processNlsFiles({ out, fileHeader: BUNDLED_FILE_HEADER, languages: i18n.defaultLanguages, })) .pipe(filter([**, !**/inlineEntryPoint*, !**/tsconfig.json, !**/loader.js])) .pipe(gulp.dest(out)) );要点编译参数transpileOnly: false表示执行完整类型检查而非仅转译preserveEnglish: true保留英文文案i18n.processNlsFiles用BUNDLED_FILE_HEADER为产出文件打上头注释并按默认语言集合处理本地化资源通过filter剔除内联入口inlineEntryPoint*、tsconfig.json与 AMD 加载器loader.js——发布物只保留 ESM 形态最终输出到out-monaco-editor-core/esm。4.5 阶段三组装最终资源final-editor-resourcesfinalEditorResourcesTask负责把非编译类资源汇集进out-monaco-editor-core该任务在 build/gulpfile.editor.js 中通过es.merge并行完成五件事拷贝法律与声明文件build/monaco/LICENSE、build/monaco/ThirdPartyNotices.txt与src/vs/monaco.d.ts直接拷入包根目录生成 ESM 类型声明editor.api.d.ts读取src/vs/monaco.d.ts经toExternalDTS函数转换为esm/vs/editor/editor.api.d.ts。该转换的实质是去全局化——把declare namespace monaco {}壳剥掉、将declare namespace monaco.xxx改写为export namespace xxx、把MonacoEnvironment收进declare global最终得到可被 ESM 消费者import的模块化声明这与 build/monaco/package.json 中typings字段的指向一一对应调整 package.json读取build/monaco/package.json将json.private false后重新写回out-monaco-editor-core/package.json——这是发布包必须解除私有标记的原因生成 version.txt读取 build/monaco/version.txt仓库中为空占位文件写入monaco-editor-core: https://github.com/microsoft/vscode/tree/${sha1}形式的溯源信息其中${sha1}即当前 HEAD 提交哈希生成发布版 README把build/monaco/README-npm.md重命名为out-monaco-editor-core/README.md即发布后随包展示的说明文档。完成以上三阶段后out-monaco-editor-core目录即为完整的 npm 发布内容结构与 build/monaco/package.json 声明的入口一致ESM 代码位于esm/vs类型声明为esm/vs/editor/editor.api.d.ts模块入口为esm/vs/editor/editor.main.js并附带LICENSE、ThirdPartyNotices.txt、version.txt与README.md。五、第四步发布到 npm生成内容检查无误后进入发布目录并执行发布cd out-monaco-editor-core npm publish这里需要注意几点实际操作细节必须进入out-monaco-editor-core目录而非仓库根目录执行npm publish因为该目录下的package.json才是已经解除private标记、携带正确version与入口字段的发布清单发布前请确认版本号已按第三步提升且与远程已存在版本不冲突发布物中嵌入的 HEAD sha 已在远程可访问第四步前置条件确保version.txt与文件头中的溯源链接有效如需验证发布物可正常被消费可参考仓库 test/monaco 下的相关测试设施如esm-check、webpack 配置对 ESM 产物进行导入与打包验证。六、发布产物一览与常见注意事项发布完成后out-monaco-editor-core目录的关键组成如下路径内容来源package.json发布清单private: false、版本号、typings/module 入口由 build/monaco/package.json 转换生成esm/vs/editor/editor.main.jsESM 模块主入口编译自out-editor-srcesm/vs/editor/editor.api.d.ts模块化类型声明由 src/vs/monaco.d.ts 经toExternalDTS转换esm/vs编辑器核心 ESM 源码extractEditorSrcTaskcompileEditorESMTask产出README.md随包说明文档由 build/monaco/README-npm.md 重命名LICENSE、ThirdPartyNotices.txt许可证与第三方声明拷贝自 build/monacoversion.txtHEAD sha 溯源信息由 build/monaco/version.txt 填充生成流程中易被忽略的要点总结版本号与 HEAD sha 绑定build/monaco/package.json的version不仅决定 npm 版本还会与 git 提交哈希一起写入打包头注释因此先推送再构建是保证溯源准确的前提monaco.d.ts无需手工维护gulp watch会借助monacodts任务自动从monaco.d.ts.recipe模板与源码重新生成日常改动公共 API 后应检查其变更是否符合预期tree-shaking 防护文件不可忽略monaco.usage.recipe中列出的 API 引用是为了在shakeLevel: 2的类成员级摇树下保住公共导出符号若新增公共 API需确认其被自动生成的usageContent覆盖或手工补充引用否则可能被裁剪两个输出目录的分工out-editor-src是中间产物提取后的源码out-monaco-editor-core是最终发布物二者会在每次editor-distro前被自动清空重建。遵循本文四步流程生成monaco.d.ts→ 提升版本号 →gulp editor-distro→cd out-monaco-editor-core npm publish即可在 VS Code 系代码库中稳定地发布新的monaco-editor-core版本。【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表