【翻译】vite-plugin-monaco-editor插件说明文档

Vite Plugin Monaco Editor

英语太烂了，只能一点一点的啃。Orz…Orz…Orz…

vite-plugin-monaco-editor是一个简化 Monaco Editor 加载过程的 Vite 插件 。

• 它使用了Vite 特定的 plugin hooks： configResolved, configureServer, transformIndexHtml。
• 它使用 esbuild 来绑定 node_modules/.monaco 目录中的Worker，通过server.middlewares http代理服务器为 bundle worker。

安装

// 使用下面的命令安装monaco-editor.
yarn add vite-plugin-monaco-editor -D
// 或者
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()
    ],
})

导入所有功能

• index.ts:

import * as monaco from 'monaco-editor'

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

导入部分功能

import * as monaco from 'monaco-editor'是导入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'
});

配置项(Options)

• languageWorkers (string[]) - 仅包括 languageWorkers支持的一个子集。

  • 默认值: ['editorWorkerService', 'css', 'html', 'json', 'typescript'].
  • 假设只使用 css worker你可以设置为 ['editorWorkerService', 'css']，其中worker editorWorkerService为必须引入的基础worker。

• customWorkers (IWorkerDefinition[]) - 引入自定义的worker。

  • 默认值: []
  • 示例值： [{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}]，entry是node_modules的相对路径，你也可以设置绝对路径。

• publicPath (string) - worker scripts的自定义公共路径，覆盖本插件保存生成文件的公共路径。你可以设置为CDN e.g https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn

  • 默认值： monacoeditorwork

• globalAPI (boolean) - 指定editor API是否通过全局 monaco 对象公开。 这项配置适用于 0.22.0 或更高版本的 monaco-editor。 从 0.22.0版本开始，ESM版本的monaco editor不再定义全局monaco 对象，除非设置了global.MonacoEnvironment = { globalAPI: true } ，详细请查看更新日志。

  • 默认值： false.

某些语言共享同一个 Worker。 如果包含以下语言之一，则还必须包含负责实例化其共享工作器的语言：

Language	Instantiator
javascript	typescript
handlebars	html
scss, less	css

---

1. 完整的导入文件清单 ↩︎