Integrating the ESM version of the Monaco Editor

Integrating the ESM version of the Monaco Editor

• Webpack
  • Option 1: Using the Monaco Editor WebPack Plugin
  • Option 2: Using plain webpack
• Parcel
• Vite

Using webpack

Here is the most basic script that imports the editor using ESM with webpack.

More self-contained samples are available in the samples folder.

---

Option 1: Using the Monaco Editor WebPack Plugin

This is the easiest method, and it allows for options to be passed into the plugin in order to select only a subset of editor features or editor languages. Read more about the Monaco Editor WebPack Plugin, which is a community authored plugin.

• index.js

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
   
	value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
	language: 'javascript'
});

• webpack.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
   
	entry: './index.js',
	output: {
   
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
	},
	module: {
   
		rules: [
			{
   
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
   
				test: /\.ttf$/,