mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 17:25:39 +01:00
Added documentation for parcel.
The sample using parcel (https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-parcel) does not work due the how parcel handlers workers. Added documentation showing how parcel can still be used by bundling workers separately.
This commit is contained in:
parent
a9a96f4382
commit
20f1b5a2ab
1 changed files with 59 additions and 0 deletions
|
|
@ -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*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue