A newer vite plugin for the Monaco Editor, support esm.
npm install vite-plugin-monaco-editor-esmnode_modules/.monaco directory, via the server.middlewares proxy http server for the bundle worker.
ts
// 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:
`ts
import { defineConfig } from 'vite'
import monacoEditorEsmPlugin from 'vite-plugin-monaco-editor-esm'
export default defineConfig({
plugins: [monacoEditorEsmPlugin()],
})
`
$3
- index.ts:
`ts
import * as monaco from 'monaco-editor'
monaco.editor.create(document.getElementById('container'), {
value: 'console.log("Hello, world")',
language: 'javascript',
})
`
$3
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
`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
`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']
- 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`