在 Svetle 中使用 Monaco Editor 和 Rollup

Question

monaco-editor v0.31.1

I am following this gist, code goes below

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

It fails on compiliation, saying the worker files cannot be found.

[:] 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'

In fact, editor.worker.js exists at the specific path. How to import monaco editor in svelte?

Thanks in advance

Answer 1

I just used that exact gist and it worked perfectly. Here are my steps:

1. Follow these "Getting Started" steps to create a fresh SvelteKit app

• Note: Since this gist uses TypeScript ( <script lang="ts"> ), you should answer Yes to the "Use TypeScript?" question when scaffolding the project. I suspect that your current project may not be set up for TypeScript and this could have something to do with the error you're seeing.

2. Install monaco-editor : npm i monaco-editor
3. Replace the contents of src/routes/index.svelte with the gist code
4. Build the app: npm run build

This works great, but actually instead of step 4 I normally run in debug mode, so I open VSCode in the project folder and then:

4. In VSCode go to Terminal and start debugger: npm run dev
5. Start debugger: hit F5 (or Run|Start Debugging), choose Chrome
6. New launch.json pops up; edit url to point to default debug address: "url": "http://localhost:3000",
7. F5 again to run in a browser in debug mode.