Improve README, webpack consumption

This commit is contained in:
Alex Dima 2018-04-09 16:53:49 +02:00
parent 7c18d303e6
commit 118c0d5783
5 changed files with 65 additions and 16 deletions

1
.gitignore vendored
View file

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

View file

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

View file

@ -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)}$`)

View file

@ -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"
}
} }

View file

@ -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 = {