Vite 中文文档

Vite Plugin Monaco Editor


A plugin to simplify loading the Monaco Editor with vite.

It uses Vite specific plugin hooks: configResolved, configureServer, transformIndexHtml.
It uses esbuild to bundle worker in the node_modules/.monaco directory, via the server.middlewares proxy http server for the bundle worker.

Installing


  1. ``` ts
  2. // make sure you have it installed monaco-editor.

  4. yarn add vite-plugin-monaco-editor -D

  6. // or
  7. npm install --save-dev vite-plugin-monaco-editor
  8. ```

Using


vite.config.ts :

  1. ``` ts
  2. import { defineConfig } from 'vite';
  3. import monacoEditorPlugin from 'vite-plugin-monaco-editor';

  5. export default defineConfig({
  6.   plugins: [monacoEditorPlugin()],
  7. });
  8. ```

Import all monaco functions


index.ts :

  1. ``` ts
  2. import * as monaco from 'monaco-editor';

  4. monaco.editor.create(document.getElementById('container'), {
  5.   value: 'console.log("Hello, world")',
  6.   language: 'javascript',
  7. });
  8. ```

Import part of monaco functions


The import * as monaco from 'monaco-editor' is import all features and languages of the Monaco Editor. Assume you only need part of the features and languages:

customMonaco.ts

  1. ``` ts
  2. import 'monaco-editor/esm/vs/editor/editor.all.js';
  3. import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';

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

  7. export { monaco };
  8. ```

The Complete list of imports: customMonaco.ts

index.ts

  1. ``` ts
  2. import { monaco } from './customMonaco.ts';
  3. monaco.editor.create(document.getElementById('container'), {
  4.   value: 'console.log("Hello, world")',
  5.   language: 'javascript',
  6. });
  7. ```

Options


languageWorkers (string[] ) - include only a subset of the languageWorkers supported.

default value: ['editorWorkerService', 'css', 'html', 'json', 'typescript'].
Assuming only use css worker(editorWorkerService is must include base worker), you can set ['editorWorkerService', 'css']

customWorkers (IWorkerDefinition[] ) - include your custom worker.

default value: []
example value: [{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}], The entry is relative path in the node_modules Or you can set absolute path.

publicPath (string ) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. Or you can set CDN e.g https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn

default value: monacoeditorwork

globalAPI (boolean ) - specifies whether the editor API should be exposed through a global monaco object or not. This option is applicable to 0.22.0 and newer version of monaco-editor. Since 0.22.0, the ESM version of the monaco editor does no longer define a global monaco object unless global.MonacoEnvironment = { globalAPI: true } is set (change log ).

default value: false.

customDistPath ((root: string, buildOutDir: string, base: string) => string ) - Custom callback returns the worker path

forceBuildCDN (boolean ) - If you use CDN, the build is skipped by default. Set to true if you want to generate woker

default value: false

Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:

Language Instantiator
:--- :---
javascript typescript
handlebars html
scss, less css