Monaco Editor 如何加载 NLS 语言包实现编辑器界面本地化【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editorMonaco Editor 编辑器界面的菜单、状态栏等 UI 文案默认是英文的。如果需要把界面切换到其他语言例如德语项目提供的方式是加载对应的 NLS 语言包脚本再加载编辑器本身。本文基于仓库文档说明两条加载路径ESM 版本下的 script 标签加载方式以及仓库自带可运行的德语 AMD 示例。加载机制NLS 脚本必须先于编辑器脚本README.md 的 “Localization” 一节说明了核心规则To load the editor in a specific language, make sure that the corresponding nls script file is loadedbeforethe main monaco editor script.也就是说语言包脚本必须在主 monaco 编辑器脚本之前被浏览器加载顺序颠倒则语言包不生效。文档给出的示例是以德语加载编辑器引入 NLS 脚本标签script srcpath/to/monaco-editor/esm/nls.messages.de.js/script其中的path/to是文档中保留的占位写法需要替换为项目里该语言包文件的实际位置。语言包的命名规律是nls.messages.语言代码.js示例中的de即德语具体支持哪些语言代码README 只写了 “Check the sources for available languages”需要查看对应版本的源码文件列表确认文档没有给出完整语言清单。另外注意 README.md 中的版本边界说明monaco-editor 出于向后兼容仍随包提供AMD构建但AMD 支持已弃用deprecated将在未来版本中移除。因此上面的 ESM script 标签方式对应长期路径AMD 方式对应仓库中现有的本地化示例。AMD 路径仓库自带的德语示例samples/legacy/目录下的 README.md 明确写着These AMD samples are not supported anymore and will be removed in future releases. Please use the ESM version of the editor!所以 AMD 本地化示例仅作为参考实现使用。samples/README.md 把它列为browser-amd-localized: running with the German locale.对应文件是 samples/legacy/browser-amd-localized/index.html。该页面加载语言包的方式是通过 AMD loader 的require.config在vs/nls配置中指定availableLanguagesscript src../../node_modules/monaco-editor/min/vs/loader.js/script script require.config({ paths: { vs: ../../node_modules/monaco-editor/min/vs } }); require.config({ vs/nls: { availableLanguages: { *: de } } }); require([vs/editor/editor.main], function () { var editor monaco.editor.create(document.getElementById(container), { value: [function x() {, \tconsole.log(Hello world!);, }].join(\n), language: javascript }); }); /script代码中各部分的作用require.config({ paths: { vs: ... } })告诉 loader 从node_modules/monaco-editor/min/vs加载vs模块vs/nls: { availableLanguages: { *: de } }将默认语言*设为de德语这是 AMD 路径下生效本地化的关键配置最后require([vs/editor/editor.main])加载并创建编辑器。运行示例并验证samples/README.md 给出的运行步骤git clone https://github.com/microsoft/monaco-editor.git cd monaco-editor cd samples npm install . npm run simpleserver启动后按文档访问http://localhost:8888进入示例列表找到browser-amd-localized页面打开。验证方式编辑器界面菜单、状态栏等 UI 文案以德语显示即为语言包生效文档中该页面的示例代码创建的 JS 编辑器里菜单项即为德语文案。注意该验证前提是项目通过http://协议加载file://协议下页面无法创建 web worker见 README.md FAQ 中的 “Could not create web worker” 说明示例自带的simpleserver脚本满足这一条件。ESM 路径在引入编辑器前插入 NLS 脚本对于 ESM 集成webpack、Vite 等打包方式参见 docs/integrate-esm.md文档给出的操作就是上面 README 中的那一条规则在主编辑器脚本之前插入对应语言的nls.messages.语言代码.js标签例如德语script srcpath/to/monaco-editor/esm/nls.messages.de.js/script两点边界需要说明仓库中的 ESM 示例webpack / parcel / Vite均未包含 NLS 脚本的加载README 也没有给出针对某个具体打包器的完整接入示例因此该代码块中path/to必须由读者按自己的产物目录替换且“在打包产物中如何保证 NLS 脚本先于主 bundle 执行”需要读者自行处理加载顺序文档未展开支持的语言代码清单同样需要按 README 的提示查源码确认不要凭猜测替换语言代码。小结与文档指引生效前提只有一条硬规则NLS 语言包脚本必须加载在主 monaco 编辑器脚本之前想直接看到完整可运行的本地化效果按 samples/README.md 的命令跑起示例服务打开browser-amd-localized页面查看德语界面AMD 路径已弃用仅作示例参考长期集成的 ESM 路径遵循 README 的 script 标签顺序规则语言包文件路径与可用语言列表以当前版本源码为准。【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考