如何在 Parcel 项目中构建 Monaco Editor 的语言 Web Worker 并配置 getWorkerUrl【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor如果你用 Parcel 打包 Monaco Editor 的 ESM 版本会遇到一个必须解决的问题编辑器的语言服务JSON、CSS、HTML、TypeScript 等运行在 Web Worker 里而 Parcel 不会自动处理这些 worker你需要在self.MonacoEnvironment上配置getWorkerUrl告诉编辑器每个语言的 worker 从哪里加载。monaco-editor 仓库里有一个可运行的 Parcel 示例samples/browser-esm-parcel示例使用的依赖版本是monaco-editor ^0.32.0和parcel ^2.2.1见 package.json本文按这个示例给出两种可用的 worker 构建与配置方式并说明各自的适用位置。准备项目与依赖示例项目的 package.json 内容如下两个依赖都在devDependencies中{ name: helloworld, scripts: { start: parcel ./src/index.html }, devDependencies: { monaco-editor: ^0.32.0, parcel: ^2.2.1 } }入口 HTML 需要一个编辑器挂载容器并以 module 方式引入入口脚本参考示例的 src/index.html!DOCTYPE html html head meta http-equivContent-Type contenttext/html;charsetutf-8 / /head body div idcontainer stylewidth: 800px; height: 600px; border: 1px solid #ccc/div script typemodule srcindex.js/script /body /html在browser-esm-parcel目录下执行安装npm install .主路径用url:导入 worker由 getWorkerUrl 返回对应 URL仓库自带的可运行示例src/index.js不单独构建 worker而是用 Parcel 的url:导入让 Parcel 自己输出每个 worker 的 URLgetWorkerUrl直接返回这些 URLimport JSONWorker from url:monaco-editor/esm/vs/language/json/json.worker.js; import CSSWorker from url:monaco-editor/esm/vs/language/css/css.worker.js; import HTMLWorker from url:monaco-editor/esm/vs/language/html/html.worker.js; import TSWorker from url:monaco-editor/esm/vs/language/typescript/ts.worker.js; import EditorWorker from url:monaco-editor/esm/vs/editor/editor.worker.js; import * as monaco from monaco-editor/esm/vs/editor/editor.main.js; self.MonacoEnvironment { getWorkerUrl: function (moduleId, label) { if (label json) { return JSONWorker; } if (label css || label scss || label less) { return CSSWorker; } if (label html || label handlebars || label razor) { return HTMLWorker; } if (label typescript || label javascript) { return TSWorker; } return EditorWorker; } }; monaco.editor.create(document.getElementById(container), { value: [function x() {, \tconsole.log(Hello world!);, }].join(\n), language: javascript });getWorkerUrl的第二个参数label是编辑器根据当前语言请求 worker 时给出的标签上面对应关系就是json用 JSON workercss、scss、less共用 CSS workerhtml、handlebars、razor共用 HTML workertypescript、javascript共用 TS worker其余情况落到默认的editor.worker。如果你不用某些语言可以只保留用到的分支。备选路径用 shell 脚本单独构建每个 worker 打包文件integrate-esm.md 的 Parcel 小节给出了另一条路径把 worker 从主入口中拆出来单独parcel buildgetWorkerUrl返回 worker 文件相对于主 bundle 的静态路径如./json.worker.js。文档建议用一个 bash 脚本完成内容如下ROOT$PWD/node_modules/monaco-editor/esm/vs OPTS--no-source-maps --log-level 1 # Parcel 选项 parcel build $ROOT/language/json/json.worker.js $OPTS parcel build $ROOT/language/css/css.worker.js $OPTS parcel build $ROOT/language/html/html.worker.js $OPTS parcel build $ROOT/language/typescript/ts.worker.js $OPTS parcel build $ROOT/editor/editor.worker.js $OPTS保存为build_workers.sh后文档给出的运行方式是sh ./build_workers.sh parcel index.html这条路径有两个必须注意的限制文档原文说明worker 会构建到与主 bundle 相同的目录通常是./dist如果你想修改 worker 的--out-dir必须同步修改index.js中getWorkerUrl返回的路径getWorkerUrl中的路径是相对于 src bundle 的构建目录的。也就是说这条路径下getWorkerUrl不再返回url:导入的变量而是返回./json.worker.js、./css.worker.js、./html.worker.js、./ts.worker.js、./editor.worker.js这类固定相对路径各分支与主路径的 label 匹配逻辑一致。运行与验证启动命令来自示例package.json的start脚本等价于parcel ./src/index.htmlnpm start启动后按示例 index.html 的说明打开http://localhost:9999/。验证时看两点页面#container中渲染出编辑器并加载示例中的 JavaScript 代码function x() { ... }编辑器以language: javascript创建按上面的 label 映射会请求ts.worker。若某个语言的补全、诊断等功能异常优先检查getWorkerUrl中该语言的分支是否存在、返回的 URL 是否指向真实构建出的 worker 文件备选路径下还要确认 worker 确实被构建到了主 bundle 同级目录。两条路径任选其一即可主路径由 Parcel 在正常打包流程内产出 worker配置简单备选路径把 worker 的构建显式拆成独立命令适合需要单独控制 worker 构建参数如--no-source-maps、--out-dir的情况代价是路径要手工保持一致。【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何在 Parcel 项目中构建 Monaco Editor 的语言 Web Worker 并配置 getWorkerUrl？
如何在 Parcel 项目中构建 Monaco Editor 的语言 Web Worker 并配置 getWorkerUrl【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor如果你用 Parcel 打包 Monaco Editor 的 ESM 版本会遇到一个必须解决的问题编辑器的语言服务JSON、CSS、HTML、TypeScript 等运行在 Web Worker 里而 Parcel 不会自动处理这些 worker你需要在self.MonacoEnvironment上配置getWorkerUrl告诉编辑器每个语言的 worker 从哪里加载。monaco-editor 仓库里有一个可运行的 Parcel 示例samples/browser-esm-parcel示例使用的依赖版本是monaco-editor ^0.32.0和parcel ^2.2.1见 package.json本文按这个示例给出两种可用的 worker 构建与配置方式并说明各自的适用位置。准备项目与依赖示例项目的 package.json 内容如下两个依赖都在devDependencies中{ name: helloworld, scripts: { start: parcel ./src/index.html }, devDependencies: { monaco-editor: ^0.32.0, parcel: ^2.2.1 } }入口 HTML 需要一个编辑器挂载容器并以 module 方式引入入口脚本参考示例的 src/index.html!DOCTYPE html html head meta http-equivContent-Type contenttext/html;charsetutf-8 / /head body div idcontainer stylewidth: 800px; height: 600px; border: 1px solid #ccc/div script typemodule srcindex.js/script /body /html在browser-esm-parcel目录下执行安装npm install .主路径用url:导入 worker由 getWorkerUrl 返回对应 URL仓库自带的可运行示例src/index.js不单独构建 worker而是用 Parcel 的url:导入让 Parcel 自己输出每个 worker 的 URLgetWorkerUrl直接返回这些 URLimport JSONWorker from url:monaco-editor/esm/vs/language/json/json.worker.js; import CSSWorker from url:monaco-editor/esm/vs/language/css/css.worker.js; import HTMLWorker from url:monaco-editor/esm/vs/language/html/html.worker.js; import TSWorker from url:monaco-editor/esm/vs/language/typescript/ts.worker.js; import EditorWorker from url:monaco-editor/esm/vs/editor/editor.worker.js; import * as monaco from monaco-editor/esm/vs/editor/editor.main.js; self.MonacoEnvironment { getWorkerUrl: function (moduleId, label) { if (label json) { return JSONWorker; } if (label css || label scss || label less) { return CSSWorker; } if (label html || label handlebars || label razor) { return HTMLWorker; } if (label typescript || label javascript) { return TSWorker; } return EditorWorker; } }; monaco.editor.create(document.getElementById(container), { value: [function x() {, \tconsole.log(Hello world!);, }].join(\n), language: javascript });getWorkerUrl的第二个参数label是编辑器根据当前语言请求 worker 时给出的标签上面对应关系就是json用 JSON workercss、scss、less共用 CSS workerhtml、handlebars、razor共用 HTML workertypescript、javascript共用 TS worker其余情况落到默认的editor.worker。如果你不用某些语言可以只保留用到的分支。备选路径用 shell 脚本单独构建每个 worker 打包文件integrate-esm.md 的 Parcel 小节给出了另一条路径把 worker 从主入口中拆出来单独parcel buildgetWorkerUrl返回 worker 文件相对于主 bundle 的静态路径如./json.worker.js。文档建议用一个 bash 脚本完成内容如下ROOT$PWD/node_modules/monaco-editor/esm/vs OPTS--no-source-maps --log-level 1 # Parcel 选项 parcel build $ROOT/language/json/json.worker.js $OPTS parcel build $ROOT/language/css/css.worker.js $OPTS parcel build $ROOT/language/html/html.worker.js $OPTS parcel build $ROOT/language/typescript/ts.worker.js $OPTS parcel build $ROOT/editor/editor.worker.js $OPTS保存为build_workers.sh后文档给出的运行方式是sh ./build_workers.sh parcel index.html这条路径有两个必须注意的限制文档原文说明worker 会构建到与主 bundle 相同的目录通常是./dist如果你想修改 worker 的--out-dir必须同步修改index.js中getWorkerUrl返回的路径getWorkerUrl中的路径是相对于 src bundle 的构建目录的。也就是说这条路径下getWorkerUrl不再返回url:导入的变量而是返回./json.worker.js、./css.worker.js、./html.worker.js、./ts.worker.js、./editor.worker.js这类固定相对路径各分支与主路径的 label 匹配逻辑一致。运行与验证启动命令来自示例package.json的start脚本等价于parcel ./src/index.htmlnpm start启动后按示例 index.html 的说明打开http://localhost:9999/。验证时看两点页面#container中渲染出编辑器并加载示例中的 JavaScript 代码function x() { ... }编辑器以language: javascript创建按上面的 label 映射会请求ts.worker。若某个语言的补全、诊断等功能异常优先检查getWorkerUrl中该语言的分支是否存在、返回的 URL 是否指向真实构建出的 worker 文件备选路径下还要确认 worker 确实被构建到了主 bundle 同级目录。两条路径任选其一即可主路径由 Parcel 在正常打包流程内产出 worker配置简单备选路径把 worker 的构建显式拆成独立命令适合需要单独控制 worker 构建参数如--no-source-maps、--out-dir的情况代价是路径要手工保持一致。【免费下载链接】monaco-editorA browser based code editor项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
