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.

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

To install the plugin, use npm or yarn:

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

Add the plugin to your Webpack configuration file:

const { MonacoEditorPlugin } = require('webpack-monaco-editor-plugin');

module.exports = {
    // ...existing Webpack configuration...
    plugins: [
        new MonacoEditorPlugin({
            features: ['!gotoSymbol'], // [Optional] Exclude specific features by prefixing their IDs with '!'
            languages: ['javascript'], // [Optional] Include specific languages
            filename: '[name].[contenthash].js', // [Optional] Workers output filename template
            publicPath: '', // [Optional] Public path for assets
            global: true, // [Optional] Enable global API
        }),
    ],
};

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

import monaco from 'monaco-editor/esm/vs/editor/editor.api.js';

const code = `function greet(name) {
    console.log(\`Hello, \${name}!\`);
}

greet('Monaco Editor');

function add(a, b) {
    return a + b;
}

console.log('Sum:', add(5, 10));

const multiply = (x, y) => x * y;
console.log('Product:', multiply(4, 7));
`;

monaco.editor.create(document.getElementById('container'), {
    value: code,
    language: 'javascript',
});

The plugin accepts the following options:

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:

npm install -g yalc

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

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:

npm install -g nodemon

To start automatic publishing, run:

nodemon

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

Start the typescript compiler in watch mode:

npm run watch

To build the plugin, run:

npm run build

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