diff --git a/docs/integrate-esm.md b/docs/integrate-esm.md index 35db1680..976d1bc3 100644 --- a/docs/integrate-esm.md +++ b/docs/integrate-esm.md @@ -1,5 +1,10 @@ ## Integrating the ESM version of the Monaco Editor +- [Webpack](#using-webpack) + - [Option 1](#option-1-using-the-monaco-editor-loader-plugin) + - [Option 2](#option-2-using-plain-webpack) +- [Parcel](#using-parcel) + ### Using webpack Here is the most basic script that imports the editor using ESM with webpack. @@ -115,3 +120,57 @@ module.exports = { } }; ``` + +--- + +### Using parcel + +When using parcel, we need to use the `getWorkerUrl` function and build the workers seperately from our main source. To simplify things, we can write a tiny bash script to build the workers for us. + +* `index.js` +```js +import * as monaco from 'monaco-editor'; + +self.MonacoEnvironment = { + getWorkerUrl: function(moduleId, label) { + if (label === 'json') { + return './json.worker.bundle.js'; + } + if (label === 'css') { + return './css.worker.bundle.js'; + } + if (label === 'html') { + return './html.worker.bundle.js'; + } + if (label === 'typescript' || label === 'javascript') { + return './ts.worker.bundle.js'; + } + return './editor.worker.bundle.js'; + }, +}; + +monaco.editor.create(document.getElementById('container'), { + value: [ + 'function x() {', + '\tconsole.log("Hello world!");', + '}' + ].join('\n'), + language: 'javascript' +}); +``` + +* `build_workers.sh` +```sh +ROOT=$PWD/node_modules/monaco-editor/esm/vs +OPTS="--no-source-maps --log-level 1" # Parcel options - See: https://parceljs.org/cli.html + +parcel build $ROOT/language/json/json.worker.js $OPTS +parcel build $ROOT/language/css/css.worker.js $OPTS +parcel build $ROOT/language/html/html.worker.js $OPTS +parcel build $ROOT/language/typescript/ts.worker.js $OPTS +parcel build $ROOT/editor/editor.worker.js $OPTS +``` + +Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the workers into the same directory as your main bundle (usually `./dist`). If you want to change the `--out-dir` of the workers, you must change the paths in `index.js` to reflect their new location. + +*note - the `getWorkerUrl` paths are relative to the build directory of your src bundle*