在 Svetle 中使用 Monaco Editor 和 Rollup答案

【问题标题】：Using Monaco Editor in Svetle with Rollup在 Svetle 中使用 Monaco Editor 和 Rollup
【发布时间】：2022-01-28 15:17:15
【问题描述】：

monaco-editor v0.31.1

我关注this gist，代码如下

<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" />

编译失败，说找不到工作文件。

[!] 错误：无法加载 C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker （由 src\MonacoEditor.svelte 导入）：ENOENT：没有这样的文件或目录，打开 'C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker'

其实editor.worker.js存在于具体路径。如何在 svelte 中导入 monaco 编辑器？

提前致谢

【问题讨论】：

标签： svelte monaco-editor

【解决方案1】：

我刚刚使用了那个确切的要点，并且效果很好。这是我的步骤：

关注these "Getting Started" steps，创建一个全新的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 再次以调试模式在浏览器中运行。

【讨论】：