@timkendrick/monaco-editor-loader v0.0.7

@timkendrick/monaco-editor-loader

Webpack loader for the Monaco editor

Installation

npm install @timkendrick/monaco-editor-loader --save-dev

Usage

This loader allows you to create a Monaco editor build with arbitrary extensions enabled, as well as optionally bundling web worker scripts into the main output.

See the @timkendrick/monaco-editor repository for a real-life example.

Scenario 1: Serving worker scripts separately (requires external server):

{
  loader: '@timkendrick/monaco-editor-loader',
  options: {
    modules: [
      {
        name: 'vs',
        root: 'path/to/vscode/src',
      },
      {
        name: 'vs/extension/name',
        root: 'path/to/extension/src',
        main: 'monaco.contribution',
        include: true,
      },
      {
        name: 'vs/library/name',
        root: 'path/to/library/src',
        main: 'monaco.contribution',
      },
    ],
    workers: [
      {
        name: 'workerMain.js',
        main: 'path/to/worker/main.ts',
        includes: [
          'path/to/first/worker/service.ts',
          'path/to/second/worker/service.ts',
        ],
      },
    ],
  },
}

In the above example, the compilation emits additional worker scripts that are loaded at runtime from the webpack publicPath directory.

This directory can be overridden at runtime by specifying the MonacoEnvironment.baseUrl global variable before the bundle script is loaded:

<script>
  window.MonacoEnvironment = {
    baseUrl: 'path/to/worker/scripts'
  };
</script>
<script src="monaco/index.js"></script>

Scenario 2: Bundling worker scripts into main output file (no additional server required):

{
  loader: '@timkendrick/monaco-editor-loader',
  options: {
    workerOptions: {
      inline: true,
    },
    modules: [
      {
        name: 'vs',
        root: 'path/to/vscode/src',
      },
      {
        name: 'vs/extension/name',
        root: 'path/to/extension/src',
        main: 'monaco.contribution',
        include: true,
      },
      {
        name: 'vs/library/name',
        root: 'path/to/library/src',
        main: 'monaco.contribution',
      },
    ],
    workers: [
      {
        name: 'workerMain.js',
        main: 'path/to/worker/main.ts',
        includes: [
          'path/to/first/worker/service.ts',
          'path/to/second/worker/service.ts',
        ],
      },
    ],
  },
}

In the above example, worker scripts will be embedded within the main output bundle.

Loader options

ModuleDefinition

WorkerDefinition