-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add webpack loader plugin to simplify ESM usage #767
Add webpack loader plugin to simplify ESM usage #767
Conversation
This sounds absolutely great! It will just take me some time to digest & understand all of this. ❤️. |
No problem, thanks for looking into it - I bashed out the code without commenting it up etc so it might be a bit confusing to read, especially with all the webpack hoops you have to jump through to make everything work. There are probably a lot of things that need explaining, so let me know if there’s stuff that doesn’t make sense and I’ll try to be as responsive as possible! |
I am trying to remove the need for But I am running into a problem while trying out the plugin: const path = require('path');
const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor/webpack');
module.exports = {
entry: './index2.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
mode: 'development',
plugins: [
new MonacoWebpackPlugin(webpack)
],
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
}; I am always getting:
I see
and I believe that should not be the case, i.e. This might be a direct result of my adding:
to your example, but if I don't do that I am getting a lot of errors about the Anyhow, what would be a complete working |
Sorry, I must have made a mistake in that instructions. I’ve put full examples up at https://github.com/timkendrick/monaco-editor-samples/tree/feature/webpack-plugin/browser-esm-webpack-plugin and https://github.com/timkendrick/monaco-editor-samples/tree/feature/webpack-plugin/browser-esm-webpack-plugin-small - let me know if those are still causing problems.
… On 18 Mar 2018, at 20:39, Alexandru Dima ***@***.***> wrote:
@timkendrick
I am trying to remove the need for babel-loader by changing self.require to require in editorSimpleWorker.
But I am running into a problem while trying out the plugin:
const path = require('path');
const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor/webpack');
module.exports = {
entry: './index2.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
mode: 'development',
plugins: [
new MonacoWebpackPlugin(webpack)
],
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
};
I am always getting:
ERROR in chunk 0
0.app.js
Conflict: Multiple assets emit to the same filename 0.app.js
I see 0.app.js mentioned lower in the output, here:
Child vs/language/typescript/tsWorker:
Asset Size Chunks Chunk Names
typescript.worker.js 7.86 MiB main [emitted] [big] main
0.app.js 1.72 MiB 0 [emitted] [big]
Entrypoint main = typescript.worker.js
[./node_modules/monaco-editor/esm/vs/editor/common/services sync recursive] ./node_modules/monaco-editor/esm/vs/editor/common/services sync 290 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 597 bytes {main} [built]
+ 108 hidden modules
and I believe that should not be the case, i.e. tsWorker should result in a single bundle file.
This might be a direct result of my adding:
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
to your example, but if I don't do that I am getting a lot of errors about the .css files.
Anyhow, what would be a complete working webpack.config.js such that I can try this out and not get any errors (either about CSS or about 0.app.js)?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
Thanks for the fast reply, even when trying out with your example, I still get that error. It is simply buried in the middle of the output, so I suppose it is easy to miss... I managed to avoid the error by changing I'll proceed to try to eliminate the need for babel rewriting. |
On second thought, that is not a very good idea. Adding @timkendrick The curious thing is that everything works fine, despite of the error, so I'm not sure how to proceed. Is this normal? Should we just ignore the error as everything works fine? |
Hmm, strange – I'm not seeing these duplicate entry points. When I run the
Are you sure you're using the exact same webpack config as in the sample? You've not got e.g. multiple entry points, or |
@timkendrick Yeah, that is really bizzare. Here is what I'm doing:
|
Thanks a lot for the detailed repro instructions, that really helped! Sorry, I skim-read your earlier message while at work and didn't realise you had already replaced the I've fixed the problem: it seems to be due to the behavior of webpack's (completely undocumented) This was causing problems because one of the main compilation's plugins is the I fixed this by applying an empty Hopefully that should be enough to get it working without the babel transform – give me a shout if you hit any more problems! |
This works great now! Thank you very much ❤️ ! |
No problem, glad to help! Although I personally wouldn't ship this just yet… The more I think about it the more I feel it would be safer to distribute this as a separate npm package that has a peerDependency on both As it currently stands, there's an implicit dependency on webpack with no version checks to ensure that breaking webpack changes don't also break this plugin, which sounds dangerous to me. Also, I feel that the current What do you think? |
👍 I agree. Do you want to please set up a repository and a npm module? I believe you should own it, as I am a webpack noob. I can delete the code from this repository, and I can ship a new editor version with the change in Regarding |
I think it might be better if someone over your side of the fence were to to own the plugin, for a couple of reasons:
Is there someone over at Microsoft who has more experience with webpack stuff maybe? I'm happy to help out with code comments/detailed explanations/general handover of how the plugin currently works if you guys want to understand how it works or maybe reimplement it, but I'm just doing this in my spare time so I sadly can't commit to the long-term maintenance burden of owning the repo/module. As for |
paging @TheLarkInn 😁 |
👋 @alexandrudima feel free to ping me on teams if needed also (alias: selarkin). I haven't had time since initial contact and working with @rebornix to dive back into this however I can help where needed. |
@alexandrudima will the next published version include this webpack plugin? |
Sorry I was offline for a bit. I am working on securing https://www.npmjs.com/package/monaco-editor-loader and following the MS procedures for setting up a new repo, etc... |
Sounds great! Technically it’s a plugin, not a loader, but glad to see this get underway.
… On 26 Mar 2018, at 10:58, Alexandru Dima ***@***.***> wrote:
Sorry I was offline for a bit. I am working on securing https://www.npmjs.com/package/monaco-editor-loader and following the MS procedures for setting up a new repo, etc...
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
Heads up. It looks like this plugin is webpack 3.6.0 incompatible. It's because of the following line of code in compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => {}); // compiler.hooks.make is undefined I'm unsure if there is an easy fix, my webpack skills are limited. Webpack 3.6.0 is still the default bundler for vue projects, I'm unsure about others. |
@moranje This is probably due to webpack's (largely undocumented) compiler hooks API changing between v3 and v4. The v3 style would be the following: compiler.plugin('make', (compilation, callback) => { ... }); …as far as I recall, this will work in webpack v4 but emits cryptic deprecation warnings talking about Either way, this reinforces the fact that the plugin should probably have an explicit (peer) dependency on webpack that only permits usage with specific webpack versions. |
so trying what you suggested gets me the following error:
I was not expecting much but, do you have any suggestions where to start looking for a fix? |
ok so this comment: #18 (comment)
|
Same here. Version 0.12
|
The recent ESM build works brilliantly, and it's really exciting to finally have the monaco editor as a first-class citizen of the webpack ecosystem.
Unfortunately, the user needs to make several non-intuitive additions to their webpack config and source code before they can use it:
entry
points for each of the required worker scripsMonacoEnvironment
that references the output paths provided for these entry pointswebpack.IgnorePlugin()
that references an internal file withinmonaco-editor
packageimport
specific feature modules from deep within themonaco-editor
package if the user wants to customise the editor buildNone of these steps is obvious without deep knowledge of how
monaco-editor
code is structured internally, increasing the potential for various unexpected gotchas along the way.This PR demonstrates a potential technique to simplify importing the Monaco Editor into a webpack project by exporting a webpack plugin from the
monaco-editor
package. It allows the user to import the editor with just a single addition to their webpack config, and automatically sets up the global environment, compiles additional worker files etc:webpack.config.js:
index.js:
For a more custom configuration, the user can specify which languages/features they want, as well as the worker scripts output directory:
webpack.config.js:
index.js:
Points for improvement/discussion:
monaco-editor
vsmonaco-editor/esm/vs/editor/editor.api
distinction is a bit confusing: if the primary target is webpack users then you could just set the mainmonaco-editor
export to theeditor.api.js
version (rather than the currenteditor.main.js
version) and let the plugin handle adding all the features. If you prefer to keepmonaco-editor
exporting the whole batteries-included editor, you could at least simplify the paths into saymonaco-editor
vsmonaco-editor/custom
or something.webpack/features.js
– for the time being I just took the basename of each file but a lot of them includeController
or whatever, and aren't great names for API optionsimport()
expressions would be better from a code-splitting perspective"webpack"
dependency tomonaco-editor
, so I've gone with passing awebpack
instance into the plugin constructor instead. While this is arguably more flexible, it is susceptible to breaking changes in the webpack library. This could be worked around by adding webpack as a peerDependency of themonaco-editor
package, or by extracting the plugin out into its own separate package entirely, which would have its own peerDependency on"webpack"
self.require()
call ineditorSimpleWorker.js
with a globalrequire()
call. The babel transform could be removed if the vscode source were changed.This doesn't impact how the package currently functions of course: the plugin is an optional add-on whose main task is to autogenerate webpack configuration rather than the user doing it manually. This means that if e.g. the user doesn't use webpack, they can just not use the plugin and they can continue as normal.
I realise this is quite a big addition, so if you guys want to re-implement this yourselves or just trash it or whatever that's fine, I just wanted to propose it as a potential avenue to explore. I'm eager to help make this library as easy as possible for users to consume in their projects, and I feel like something like this would be the missing piece of the puzzle. Let me know if there's anything I can do to help!