Vite 插件摩纳哥编辑器

简化装入的插件 摩纳哥编辑器 与 维特。 。 。 .

• 它使用Vite特定插件钩子: CconfigResolved,配置Server,变换IndexHtml.
• 它用起重机将工人捆绑起来 node_modules/.monaco 目录,通过 server.middlewares 捆绑工人的代理 http 服务器 .

安装

// make sure you have it installed monaco-editor.

yarn add vite-plugin-monaco-editor -D

// or
npm install --save-dev vite-plugin-monaco-editor

使用

• vite.config.ts数字 :

import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [monacoEditorPlugin()],
});

导入所有monaco 函数

• index.ts数字 :

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});

导入 monaco 函数的一部分

这个 import * as monaco from 'monaco-editor' 正在导入摩纳哥编辑器的所有特性和语言。 假设您只需要部分特性和语言:

• customMonaco.ts

import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export { monaco };

完整的进口清单: 自定义摩纳哥特斯

• index.ts

import { monaco } from './customMonaco.ts';
monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});

选项

• languageWorkers (单位:千美元)string[]) - 仅包含所支持的语言工人的子集.

  • 默认值 : ['editor Worker Service','cs','html','json','typescript'].
  • 假设只使用cs工人(编辑工人服务必须包括基础工人),您可以设置 ['编辑工人服务','cs']

• customWorkers (单位:千美元)IWorkerDefinition[]- 包括你的定制工人.

  • 默认值: []
  • 示例值 : [{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}],该 entry 是节点单元中的相对路径 或者你可以设置绝对的路径.

• publicPath (单位:千美元)string) - 为工人脚本自定义的公用路径,覆盖此插件生成的文件将从中服务的公共路径. 或者你可以设置CDN,比如 https://unpkg.com/[email protected]/cdn

  • 默认值 : monacoeditorwork

• globalAPI (单位:千美元)boolean) - 指定编辑器API是否应该通过环球显示 monaco 对象或非对象。 此选项适用于: 0.22.0 和最新版本 monaco-editor。自 0.22.0,Monaco编辑器的无害环境管理版本不再定义一个全球 monaco 对象,除非 global.MonacoEnvironment = { globalAPI: true } 设定( e)更改日志) (中文(简体) ).

  • 默认值 : false。 。 。 .

• customDistPath (单位:千美元)(root: string, buildOutDir: string, base: string) => string- 自定义回调返回工人路径

• forceBuildCDN (单位:千美元)boolean) - 如果您使用 CDN, 默认会跳过该构建 。 如果您想要生成唤醒器, 设置为真

  • 默认值 : false

有些语言共用同一个网络工人. 如果包含下列一种语言,您还必须包括负责即时处理其共用工人的语言: