SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 11:35:40 +01:00
Code Issues Projects Releases Packages Activity

Document the Webpack Monaco Editor Loader Plugin

Browse source
This commit is contained in:
Alex Dima 2018-04-12 09:24:52 +02:00
parent b5607fec63
commit 139273dc0a
1 changed files with 93 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

140
docs/integrate-esm.md
View file

@ -6,6 +6,53 @@ Here is the most basic script that imports the editor using ESM with webpack.
More self-contained samples are available at [monaco-editor-samples](https://github.com/Microsoft/monaco-editor-samples). More self-contained samples are available at [monaco-editor-samples](https://github.com/Microsoft/monaco-editor-samples).
---
### Option 1: Using the Monaco Editor Loader Plugin
This is the easiest method, and it allows for options to be passed in to the plugin in order to select only a subset of editor features or editor languages. Read more about the [Monaco Editor Loader Plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin), which is a community authored plugin.
* `index.js`
```js
import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
```
* `webpack.config.js`
```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [
new MonacoWebpackPlugin()
]
};
```
---
### Option 2: Using plain webpack
* `index.js` * `index.js`
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
@ -14,30 +61,30 @@ import * as monaco from 'monaco-editor';
// to instruct the editor how you named the // to instruct the editor how you named the
// bundles that contain the web workers. // bundles that contain the web workers.
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) { getWorkerUrl: function (moduleId, label) {
if (label === 'json') { if (label === 'json') {
return './json.worker.bundle.js'; 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';
} }
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'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}); });
``` ```
@ -47,32 +94,31 @@ const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
module.exports = { module.exports = {
entry: { entry: {
"app": './index.js', "app": './index.js',
// Package each language's worker and give these filenames in `getWorkerUrl` // Package each language's worker and give these filenames in `getWorkerUrl`
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
}, },
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist') path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [{ rules: [{
test: /\.css$/, test: /\.css$/,
use: [ 'style-loader', 'css-loader' ] use: ['style-loader', 'css-loader']
}] }]
}, },
plugins: [ plugins: [
// Ignore require() calls in vs/language/typescript/lib/typescriptServices.js // Ignore require() calls in vs/language/typescript/lib/typescriptServices.js
new webpack.IgnorePlugin( new webpack.IgnorePlugin(
/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /^((fs)|(path)|(os)|(crypto)|(source-map-support))$/,
/vs\/language\/typescript\/lib/ /vs\/language\/typescript\/lib/
) )
] ]
}; };
``` ```