|
@@ -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*
|