Improve README, webpack consumption

pull/2748/head
Alex Dima 7 years ago
parent 7c18d303e6
commit 118c0d5783

1
.gitignore vendored

@ -0,0 +1 @@
/node_modules/

@ -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
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us

@ -1,4 +1,5 @@
const path = require('path');
const webpack = require('webpack');
const AddWorkerEntryPointPlugin = require('./plugins/AddWorkerEntryPointPlugin');
const INCLUDE_LOADER_PATH = require.resolve('./loaders/include');
@ -42,11 +43,10 @@ const languagesById = fromPairs(
const featuresById = mapValues(FEATURES, (feature, key) => ({ label: key, ...feature }))
class MonacoWebpackPlugin {
constructor(webpack, options = {}) {
constructor(options = {}) {
const languages = options.languages || Object.keys(languagesById);
const features = options.features || Object.keys(featuresById);
const output = options.output || '';
this.webpack = webpack;
this.options = {
languages: languages.map((id) => languagesById[id]).filter(Boolean),
features: features.map(id => featuresById[id]).filter(Boolean),
@ -55,7 +55,6 @@ class MonacoWebpackPlugin {
}
apply(compiler) {
const webpack = this.webpack;
const { languages, features, output } = this.options;
const publicPath = getPublicPath(compiler);
const modules = [EDITOR_MODULE, ...languages, ...features];
@ -63,7 +62,7 @@ class MonacoWebpackPlugin {
({ label, alias, worker }) => worker && ({ label, alias, ...worker })
).filter(Boolean);
const rules = createLoaderRules(languages, features, workers, publicPath);
const plugins = createPlugins(webpack, workers, output);
const plugins = createPlugins(workers, output);
addCompilerRules(compiler, rules);
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, {
[id]: resolveMonacoPath(fallback)
}) : acc), {});
return [
...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 }) =>
new AddWorkerEntryPointPlugin(webpack, {
new AddWorkerEntryPointPlugin({
id,
entry: resolveMonacoPath(entry),
filename: path.join(outputPath, output),
plugins: [
createContextPlugin(webpack, WORKER_LOADER_PATH, {}),
createContextPlugin(WORKER_LOADER_PATH, {}),
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(
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(
new RegExp(`^(${ignoredModules.map((id) => `(${id})`).join('|')})$`),
new RegExp(`^${path.dirname(targetPath)}$`)

@ -21,5 +21,8 @@
"bugs": {
"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 {
constructor(webpack, {
constructor({
id,
entry,
filename,
chunkFilename = undefined,
plugins = undefined,
}) {
this.webpack = webpack;
this.options = { id, entry, filename, chunkFilename, plugins };
}
apply(compiler) {
const webpack = this.webpack;
const { id, entry, filename, chunkFilename, plugins } = this.options;
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {
const outputOptions = {

Loading…
Cancel
Save