Doubt about file generated after using npm run build with Vue-cli + webpack

Asked

Viewed 202 times

1

I’m studying and developing a spa, and I noticed that using the remote npm run build it generates two files app.js and app.map.js I didn’t mean why this file .map someone can explain to me why?

1 answer

1


The . map files are auxiliary javascript and css files (and now also ts) that were minified. They are called Sourcemaps. When you minify a file, like the app.js file, it picks it up thousands of beautiful lines of code and turns it into just a few ugly code lines. I hope when you send the code to production, you are using minified code instead of version complete and non-minified. When your app is in production and have an error, sourcemap will help understand your ugly file and will allow you to see the original version of the code. If you do not had the sourcemap, any error would seem cryptic at best hypotheses.

The same for CSS files. Once you grab a SASS file or LESS and compiles it into CSS, it no longer looks at all like shape original. If you enable sourcemaps, you can see the original state file, instead of modified state.

So to answer your questions in order:

  • What is it for? To dereference ugly code
  • How can a developer use it? You use it to debug a production application. In development mode, you can use the full version of Vue. In production, you would use the minified version.
  • Should I be worried about creating a js.map file? If you’re worried about debugging easier production code, then yes, you must do it.
  • How is this created? It is created at the time of creation. There are building tools that can build your file . map to you, as with other files.

Taken and adjusted from:

https://stackoverflow.com/a/21719713/6009128

Browser other questions tagged

You are not signed in. Login or sign up in order to post.