New Vite Plugin Monaco Editor Support ESM

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

// make sure you have it installed monaco-editor.
pnpm install -D vite-plugin-monaco-editor-esm

// or
yarn add vite-plugin-monaco-editor-esm -D

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

Using

• vite.config.ts:

import { defineConfig } from 'vite'
import monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm'

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

Import all monaco functions

• index.ts:

import * as monaco from 'monaco-editor'

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

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

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

export { monaco }

The Complete list of imports: customMonaco.ts

• index.ts

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

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']
  • When using Monaco versions that renamed the language namespaces (e.g. monaco.css instead of monaco.languages.css), you can continue to pass either form (css or languages.css, same for html, json, typescript). The plugin normalizes the labels so both the legacy and the new names resolve to the correct worker.

• 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