The understanding of JavaScript's Sourcemap

When we're done with the VUE-CLI development project, we're going to deploy, execute the NPM Run Build command, and you'll see that it generates a. js file and a corresponding. map file. At that time, the main function of the. map file is that after we compress the file, if the compressed file has an error, we can pinpoint the original location of the error, that is, to find the error in the uncompressed file before packaging. Just know the concept, now understand, just remember.

Now use VUE-CLI to create a project, using its default content can be, you can also make some mistakes, for example, casually write a few AJAX requests, the interface must be non-existent, there must be errors, if you do not write errors, you can also casually console.log () something, So that we can pinpoint the location of the original file. At this time to execute the NPM Run Build command, you can see the Dist folder, open it, have the static folder, then open, there are CSS and JS folder, in the folder, you can see the compressed files and corresponding map files.

Since the compressed file is to be placed on the server for deployment, we also have to write the server code, create a new folder Vue-node, then npm init-y initialize it, and then NPM Install Express installed express dependency. Create a new Index.js file, and the public folder. We copy the contents of the Dist directory, which is the file to be deployed, to the public folder. The entire directory is as follows

At this time, write the service-side code in Index.js

Const EXPRESS = require (' Express '= Express (); // main output static file App.use (express.static (' Public ')) App.listen (3000)

At this time Nodemon index.js start the server, in the browser input localhost:3000, you can see the page, then open the console, interface error

GetUser interface error, error in Header.vue, click Header.vue, you see the original file location, this is the role of Sourcemap,. map file, we know the location of the error in the source file. Click Header.vue you see it jump to the console in the sources panel.

　

At this time to see the left side of the sources panel, you find webpack://, click on it, you will see SRC, originally here to store our source code, which is also the role of Sourcmap. With the source code, anything can be done, click on the source file we want to see, it will be displayed on the right side, then we can set breakpoints, check the file.

When we remove all the map files, you will find that the advantages mentioned above do not exist. We can try, open the public folder under Vue-node, the inside JS and CSS map file deleted. Then refresh the browser, the console only see the compressed file

Click on the file name, jump, jump to also compressed files, difficult to debug.

The understanding of JavaScript's Sourcemap