Webpack Monaco Editor Plugin

webpack-monaco-editor-plugin is a Webpack plugin designed to simplify the integration of the Monaco Editor into your Webpack projects. It provides a seamless way to load and configure Monaco Editor's ESM modules, including support for workers, features, and languages.

Features

• Automatically configures Monaco Editor workers.
• Supports custom features and languages.
• Allows specifying public paths for assets.
• Compatible with Webpack 5 and above.

Installation

To install the plugin, use npm or yarn:

1npm install webpack-monaco-editor-plugin --save-dev

Usage Example

Add the plugin to your Webpack configuration file:

1const { MonacoEditorPlugin } = require('webpack-monaco-editor-plugin');
2
3module.exports = {
4    // ...existing Webpack configuration...
5    plugins: [
6        new MonacoEditorPlugin({
7            features: ['!gotoSymbol'], // [Optional] Exclude specific features by prefixing their IDs with '!'
8            languages: ['javascript'], // [Optional] Include specific languages
9            filename: '[name].[contenthash].js', // [Optional] Workers output filename template
10            publicPath: '', // [Optional] Public path for assets
11            global: true, // [Optional] Enable global API
12        }),
13    ],
14};

Note: Specifying 'javascript' in the languages option will automatically include 'typescript' as well, since Monaco Editor's JavaScript support depends on the TypeScript language service.

Then, use the monaco editor in your app

1import monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
2
3const code = `function greet(name) {
4    console.log(\`Hello, \${name}!\`);
5}
6
7greet('Monaco Editor');
8
9function add(a, b) {
10    return a + b;
11}
12
13console.log('Sum:', add(5, 10));
14
15const multiply = (x, y) => x * y;
16console.log('Product:', multiply(4, 7));
17`;
18
19monaco.editor.create(document.getElementById('container'), {
20    value: code,
21    language: 'javascript',
22});

Options

The plugin accepts the following options:

Option	Type	Default	Description
features	string[]	[]	List of features to include or exclude (e.g., ['!gotoSymbol']).
languages	string[]	[]	List of languages to include (e.g., ['javascript', 'html']).
filename	string	[name].[contenthash].js	Output filename pattern for generated files.
publicPath	string	''	Public path for assets.
global	boolean	false	Whether to enable the global API.

Development

Why use yalc instead of npm link?

While npm link is a built-in tool for local development, it can cause issues with dependency resolution, especially with complex setups like monorepos or when using different versions of dependencies. yalc is a better alternative because:

• It publishes your package to a local store and installs it as if it were a real npm package, ensuring consistent dependency resolution.
• It avoids symlink-related issues that can cause problems with tools like webpack, especially with module duplication or type mismatches.
• It is more reliable for testing your package in real-world scenarios.

To install yalc, run:

1npm install -g yalc

For more details on installation and usage, please check the yalc repository.

Automatic build and publish with Nodemon

For convenience, nodemon is configured to automatically build and publish the package to Yalc local store whenever source files change. This streamlines the development workflow by ensuring your local package updates are immediately available to consuming projects.

To install nodemon, run:

1npm install -g nodemon

To start automatic publishing, run:

1nodemon

This command uses nodemon to watch for changes and trigger yalc publish --push --changed --update.

Watch

Start the typescript compiler in watch mode:

1npm run watch

Build

To build the plugin, run:

1npm run build

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.