Closed10
Svelte(kit)でMonacoEditor(esm)を動かす
mouseMonacoのesmバージョンを使う方法
Webpackの場合はいい感じにやってくれそう
mouseSvelteKitの中身はViteらしいので自分で色々やる必要がある
mouseそもそもの読み込みがSSRあるとできないのでSSRじゃない時だけ（クライアントのみ）インポートするようにする
if (import.meta.env.SSR) return;
import("monaco-editor").then((monaco) => {
monaco.editor.create(...)
});
こっちのがいいみたい
import { browser } from '$app/env';
if (browser) {
// ブラウザ上だけ
}
これだけだと動かないからWorkerを用意する
Option 2: Using plain webpackこれを参考にする
少し調べるとViteは直接Workerを使えるみたい&getWorkerUrlじゃなくてgetWorkerを使えば直接指定できる
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
export const getWorker = (_moduleId, label) => {
if (label === "typescript" || label === "javascript") {
return new tsWorker();
}
return new editorWorker();
};
self.MonacoEnvironment = {
getWorker,
};
ここまで
mouse@monaco-editor/loaderも検討したけど重いらしい
素の manoco-editor は webpack plugin を要求してきて辛いが @monaco-editor/loader を使えば jspm の prebuilt されたJSで読み込める。ただその分CDN経由で遅い。
https://zenn.dev/mizchi/scraps/87c2c5a37cbd6a#comment-724483432db900
mouseMonacoのフォーマッターを変える
mouseこの状態だとビルド通らない、adapterのnode/staticは関係なさそう
でも色々と直せそうな所あるから試してみてる
このスクラップは2023/01/19にクローズされました