Separate Source Maps' files from real files via namespace #2950
Description
I think that files from Source Maps should be separated from the real files (in particular, the imports), like it is in projects built with Webpack (They are placed under webpack:// namespace).
So, "virtual files" should be displayed under, for example, source-maps:// namespace in DevTools.
Let's looks at the start project's (yarn create @vitejs/app my-vue-app --template vue) Source Maps.
I did only one change that is adding sourcemap: true:
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true
}
})build's mode Source Maps review and one bug
Spoiler
Currently for build it looks so:
build's Source Maps looks not bad, but if it will be placed in separate namespace it would be a bit more convenient:
Since you can do not expand the original files namespace.
And the best variant (for me) is:
All project's code is in source-maps://, node_modules and Vite's specific code are in node-modules://.
I did it with a simple replacement:
sourceMapsPathChangerPlugin([
["../../node_modules/", "node-modules:///"],
["../../vite/", "node-modules:///vite/"],
["../../", "source-maps:///"],
])via my Rollup's plugin.
But the problem that I can write a plugin only for build, but not for dev.
By the way, did you note that App.vue was missed in the screenshots?
It's a bug! Of Vite.js. I did not reproduce this bug with pure Rollup.js.
UPD: Created an issue for it: #2959
dev's mode Source Maps
In dev mode Source Maps does not look nice. Definitely. Real files are mixed with files from Source Maps.
Especially I don't like that it shows absolute path to components from Source Maps.
Also for each edit of a file a new file (from an import) is created:
16 files (it can be even more — each edit is a new file until you refresh the page)!
While I need only 3: App.vue, HelloWorld.vue and main.js.
Separating of Source Maps from real files/imports are highly required here.
Also it impossible to do it with a plugin, since changing of Source Maps (changing of sources field) possible only in generateBundle hook what does not called in dev mode.
So I expect the separating files from Source Maps to a different namespace or/and an ability to do it manually with a plugin (handle the Source Maps object in dev mode).
By the way, Webpack's ones:
Spoiler
Both do not looks nice, but it uses the separating.
dev:
It's interesting that content in webpavk-internal:// browser handle as real files, not as files from source maps.
build: