在带有 Rollup 的 Svetle 中使用 Monaco Editor

Question

monaco-editor v0.31.1

我正在关注 this 要点，下面是代码

<script lang="ts">
  import type monaco from 'monaco-editor';
  import { onMount } from 'svelte';
  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
  import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
  import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

  let divEl: HTMLDivElement = null;
  let editor: monaco.editor.IStandaloneCodeEditor;
  let Monaco;

  onMount(async () => {
      // @ts-ignore
      self.MonacoEnvironment = {
          getWorker: function (_moduleId: any, label: string) {
              if (label === 'json') {
                  return new jsonWorker();
              }
              if (label === 'css' || label === 'scss' || label === 'less') {
                  return new cssWorker();
              }
              if (label === 'html' || label === 'handlebars' || label === 'razor') {
                  return new htmlWorker();
              }
              if (label === 'typescript' || label === 'javascript') {
                  return new tsWorker();
              }
              return new editorWorker();
          }
      };

      Monaco = await import('monaco-editor');
      editor = Monaco.editor.create(divEl, {
          value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
          language: 'javascript'
      });

      return () => {
          editor.dispose();
      };
  });
</script>

<div bind:this={divEl} class="h-screen" />

编译失败，说找不到worker文件

[!] Error: Could not load C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker (imported by src\MonacoEditor.svelte): ENOENT: no such file or directory, open 'C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker'

事实上，editor.worker.js存在于特定路径。如何在 svelte 中导入 monaco 编辑器？

提前致谢

Answer 1

我只是使用了那个确切的要点并且它工作得很好。这是我的步骤：

关注 these "Getting Started" steps to create a fresh SvelteKit 应用

注意：由于此要点使用 TypeScript (<script lang="ts">)，您应该对“使用 TypeScript？”回答“是”。脚手架项目时的问题。我怀疑您当前的项目可能没有为 TypeScript 设置，这可能与您看到的错误有关。

安装monaco-editor：npm i monaco-editor
将 src/routes/index.svelte 的内容替换为 gist code
构建应用程序：npm run build

这很好用，但实际上我通常运行在调试模式下而不是第 4 步，所以我在项目文件夹中打开 VSCode 然后：

在 VSCode 中转到终端并启动调试器：npm run dev
启动调试器：按 F5（或运行|开始调试），选择 Chrome
弹出新launch.json；编辑 url 以指向默认调试地址："url": "http://localhost:3000",
F5 在调试模式下的浏览器中再次运行。

在带有 Rollup 的 Svetle 中使用 Monaco Editor

Using Monaco Editor in Svetle with Rollup

monaco-editor

svelte