mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 23:13:02 +01:00
Improve README, webpack consumption
This commit is contained in:
parent
7c18d303e6
commit
118c0d5783
5 changed files with 65 additions and 16 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -0,0 +1 @@
|
||||||
|
/node_modules/
|
||||||
48
README.md
48
README.md
|
|
@ -1,5 +1,51 @@
|
||||||
|
# Monaco Editor Webpack Loader Plugin
|
||||||
|
|
||||||
# Contributing
|
A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [webpack](https://webpack.js.org/) contributed by [Tim Kendrik](https://github.com/timkendrick).
|
||||||
|
|
||||||
|
## Installing
|
||||||
|
```sh
|
||||||
|
npm install monaco-editor-webpack-plugin
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using
|
||||||
|
* `webpack.config.js`:
|
||||||
|
```js
|
||||||
|
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './index.js',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'app.js'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new MonacoWebpackPlugin()
|
||||||
|
]
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
* `index.js`:
|
||||||
|
```js
|
||||||
|
import * as monaco from 'monaco-editor';
|
||||||
|
|
||||||
|
monaco.editor.create(document.getElementById('container'), {
|
||||||
|
value: 'console.log("Hello, world")',
|
||||||
|
language: 'javascript'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
Options can be passed in to `MonacoWebpackPlugin`. They can be used to generate a smaller editor bundle by selecting only certain languages or only certain editor features:
|
||||||
|
|
||||||
|
* `output` (`string`) - append a certain string to all generated files.
|
||||||
|
* default value: `''`.
|
||||||
|
* `languages` (`string[]`) - include only a subset of the languages supported.
|
||||||
|
* default value: `['bat', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'pgsql', 'php', 'postiats', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'sb', 'scss', 'solidity', 'sql', 'swift', 'typescript', 'vb', 'xml', 'yaml']`.
|
||||||
|
* `features` (`string[]`) - include only a subset of the editor features.
|
||||||
|
* default value: `['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'format', 'gotoDeclarationCommands', 'gotoDeclarationMouse', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'iPadShowKeyboard', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickFixCommands', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'wordHighlighter', 'wordOperations']`.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
This project welcomes contributions and suggestions. Most contributions require you to agree to a
|
This project welcomes contributions and suggestions. Most contributions require you to agree to a
|
||||||
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
|
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
|
||||||
|
|
|
||||||
21
index.js
21
index.js
|
|
@ -1,4 +1,5 @@
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
const AddWorkerEntryPointPlugin = require('./plugins/AddWorkerEntryPointPlugin');
|
const AddWorkerEntryPointPlugin = require('./plugins/AddWorkerEntryPointPlugin');
|
||||||
const INCLUDE_LOADER_PATH = require.resolve('./loaders/include');
|
const INCLUDE_LOADER_PATH = require.resolve('./loaders/include');
|
||||||
|
|
||||||
|
|
@ -42,11 +43,10 @@ const languagesById = fromPairs(
|
||||||
const featuresById = mapValues(FEATURES, (feature, key) => ({ label: key, ...feature }))
|
const featuresById = mapValues(FEATURES, (feature, key) => ({ label: key, ...feature }))
|
||||||
|
|
||||||
class MonacoWebpackPlugin {
|
class MonacoWebpackPlugin {
|
||||||
constructor(webpack, options = {}) {
|
constructor(options = {}) {
|
||||||
const languages = options.languages || Object.keys(languagesById);
|
const languages = options.languages || Object.keys(languagesById);
|
||||||
const features = options.features || Object.keys(featuresById);
|
const features = options.features || Object.keys(featuresById);
|
||||||
const output = options.output || '';
|
const output = options.output || '';
|
||||||
this.webpack = webpack;
|
|
||||||
this.options = {
|
this.options = {
|
||||||
languages: languages.map((id) => languagesById[id]).filter(Boolean),
|
languages: languages.map((id) => languagesById[id]).filter(Boolean),
|
||||||
features: features.map(id => featuresById[id]).filter(Boolean),
|
features: features.map(id => featuresById[id]).filter(Boolean),
|
||||||
|
|
@ -55,7 +55,6 @@ class MonacoWebpackPlugin {
|
||||||
}
|
}
|
||||||
|
|
||||||
apply(compiler) {
|
apply(compiler) {
|
||||||
const webpack = this.webpack;
|
|
||||||
const { languages, features, output } = this.options;
|
const { languages, features, output } = this.options;
|
||||||
const publicPath = getPublicPath(compiler);
|
const publicPath = getPublicPath(compiler);
|
||||||
const modules = [EDITOR_MODULE, ...languages, ...features];
|
const modules = [EDITOR_MODULE, ...languages, ...features];
|
||||||
|
|
@ -63,7 +62,7 @@ class MonacoWebpackPlugin {
|
||||||
({ label, alias, worker }) => worker && ({ label, alias, ...worker })
|
({ label, alias, worker }) => worker && ({ label, alias, ...worker })
|
||||||
).filter(Boolean);
|
).filter(Boolean);
|
||||||
const rules = createLoaderRules(languages, features, workers, publicPath);
|
const rules = createLoaderRules(languages, features, workers, publicPath);
|
||||||
const plugins = createPlugins(webpack, workers, output);
|
const plugins = createPlugins(workers, output);
|
||||||
addCompilerRules(compiler, rules);
|
addCompilerRules(compiler, rules);
|
||||||
addCompilerPlugins(compiler, plugins);
|
addCompilerPlugins(compiler, plugins);
|
||||||
}
|
}
|
||||||
|
|
@ -117,30 +116,30 @@ function createLoaderRules(languages, features, workers, publicPath) {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
function createPlugins(webpack, workers, outputPath) {
|
function createPlugins(workers, outputPath) {
|
||||||
const workerFallbacks = workers.reduce((acc, { id, fallback }) => (fallback ? Object.assign(acc, {
|
const workerFallbacks = workers.reduce((acc, { id, fallback }) => (fallback ? Object.assign(acc, {
|
||||||
[id]: resolveMonacoPath(fallback)
|
[id]: resolveMonacoPath(fallback)
|
||||||
}) : acc), {});
|
}) : acc), {});
|
||||||
return [
|
return [
|
||||||
...Object.keys(IGNORED_IMPORTS).map((id) =>
|
...Object.keys(IGNORED_IMPORTS).map((id) =>
|
||||||
createIgnoreImportsPlugin(webpack, id, IGNORED_IMPORTS[id])
|
createIgnoreImportsPlugin(id, IGNORED_IMPORTS[id])
|
||||||
),
|
),
|
||||||
...uniqBy(workers, ({ id }) => id).map(({ id, entry, output }) =>
|
...uniqBy(workers, ({ id }) => id).map(({ id, entry, output }) =>
|
||||||
new AddWorkerEntryPointPlugin(webpack, {
|
new AddWorkerEntryPointPlugin({
|
||||||
id,
|
id,
|
||||||
entry: resolveMonacoPath(entry),
|
entry: resolveMonacoPath(entry),
|
||||||
filename: path.join(outputPath, output),
|
filename: path.join(outputPath, output),
|
||||||
plugins: [
|
plugins: [
|
||||||
createContextPlugin(webpack, WORKER_LOADER_PATH, {}),
|
createContextPlugin(WORKER_LOADER_PATH, {}),
|
||||||
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
|
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
...(workerFallbacks ? [createContextPlugin(webpack, WORKER_LOADER_PATH, workerFallbacks)] : []),
|
...(workerFallbacks ? [createContextPlugin(WORKER_LOADER_PATH, workerFallbacks)] : []),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
function createContextPlugin(webpack, filePath, contextPaths) {
|
function createContextPlugin(filePath, contextPaths) {
|
||||||
return new webpack.ContextReplacementPlugin(
|
return new webpack.ContextReplacementPlugin(
|
||||||
new RegExp(`^${path.dirname(filePath)}$`),
|
new RegExp(`^${path.dirname(filePath)}$`),
|
||||||
'',
|
'',
|
||||||
|
|
@ -148,7 +147,7 @@ function createContextPlugin(webpack, filePath, contextPaths) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createIgnoreImportsPlugin(webpack, targetPath, ignoredModules) {
|
function createIgnoreImportsPlugin(targetPath, ignoredModules) {
|
||||||
return new webpack.IgnorePlugin(
|
return new webpack.IgnorePlugin(
|
||||||
new RegExp(`^(${ignoredModules.map((id) => `(${id})`).join('|')})$`),
|
new RegExp(`^(${ignoredModules.map((id) => `(${id})`).join('|')})$`),
|
||||||
new RegExp(`^${path.dirname(targetPath)}$`)
|
new RegExp(`^${path.dirname(targetPath)}$`)
|
||||||
|
|
|
||||||
|
|
@ -21,5 +21,8 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/Microsoft/monaco-editor-webpack-plugin/issues"
|
"url": "https://github.com/Microsoft/monaco-editor-webpack-plugin/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/Microsoft/monaco-editor-webpack-plugin#readme"
|
"homepage": "https://github.com/Microsoft/monaco-editor-webpack-plugin#readme",
|
||||||
|
"dependencies": {
|
||||||
|
"webpack": "^4.5.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
class AddWorkerEntryPointPlugin {
|
class AddWorkerEntryPointPlugin {
|
||||||
constructor(webpack, {
|
constructor({
|
||||||
id,
|
id,
|
||||||
entry,
|
entry,
|
||||||
filename,
|
filename,
|
||||||
chunkFilename = undefined,
|
chunkFilename = undefined,
|
||||||
plugins = undefined,
|
plugins = undefined,
|
||||||
}) {
|
}) {
|
||||||
this.webpack = webpack;
|
|
||||||
this.options = { id, entry, filename, chunkFilename, plugins };
|
this.options = { id, entry, filename, chunkFilename, plugins };
|
||||||
}
|
}
|
||||||
|
|
||||||
apply(compiler) {
|
apply(compiler) {
|
||||||
const webpack = this.webpack;
|
|
||||||
const { id, entry, filename, chunkFilename, plugins } = this.options;
|
const { id, entry, filename, chunkFilename, plugins } = this.options;
|
||||||
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {
|
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {
|
||||||
const outputOptions = {
|
const outputOptions = {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue