没有语言支持的最小摩纳哥编辑器

Question

我正在尝试将 Monaco 配置为一个 web 组件（使用 vite 的 lit-ts 模板），它可以编辑一种自定义语言并且没有很多 Monaco 的额外功能。 （然后我想复制输出以在我的主项目的 index.html 中使用脚本标签）

在我的主文件中我有

import {monaco} from "./customMonaco";
// add support for the 1 custom language I do want
import "./mix.contribution.js";

在 customMonaco.ts 我有

import "monaco-editor/esm/vs/editor/browser/viewParts/contentWidgets/contentWidgets.js";
import "monaco-editor/esm/vs/editor/browser/viewParts/lineNumbers/lineNumbers.js";
import "monaco-editor/esm/vs/editor/browser/viewParts/lineNumbers/lineNumbers.css";
import "monaco-editor/esm/vs/editor/browser/viewParts/linesDecorations/linesDecorations.js";
import "monaco-editor/esm/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
export {monaco};

但是当我构建这个时，我仍然得到所有的语言文件。

我的vite配置是

export default defineConfig({
    build: {
        lib: {
            entry: 'src/rmx-monaco.ts',
            formats: ['es']
        },
        rollupOptions: {
            external: /^lit/,
            // output: {
            //     manualChunks: undefined,
            //     inlineDynamicImports: true,
            //     entryFileNames: "[name].js",
            //     // Prevent vendor.js being created
            //     // prevents adding cache busting
            //     chunkFileNames: "assets/[name].js",
            //     assetFileNames: "rmx-monaco.[ext]",
            // },
        }
    }, server: {port: 5000}
})

接下来我将取消注释输出部分以便只获得 1 个 js 文件，但我不希望它包含语言支持

Answer 1

monaco-editor 回购中有一个

example

就是为了这个。看看

index.js

。当前示例在

node_modules

中使用

..

，因此导入与最新的 monaco 略有不同，但如果您：

cd monaco-editor/samples
npm install [email protected]
cd browser-esm-webpack-small
npm run generate-imports

它将更新 index.js 以使用适用于该摩纳哥版本的导入。

我在用：

import 'monaco-editor/esm/vs/editor/browser/coreCommands.js';
import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'