I used a jSON2TS library to develop a json to TS function. In the spirit of looking at the principles of source code, I opened the source code and saw at first sight a file with a.map suffix.

As a frontend, I had no idea what a.map file was, so I started my Google search, which is the subject of this article, Source Map.

background

First, before we talk about what a Source map is, let’s get to the background.

Today, most of the source code needs to be converted before it can be put into production environment, such as jquery in the early days, and now popular frameworks such as Vue and React.

After source code conversion, the actual running code is different from the development code, and it becomes almost impossible to understand when debugging. The converted code can be thousands of characters long, variable names can be changed, and you can’t tell what’s wrong with the code. So what to do?

This is the problem Source Map addresses.

define

Source maps, in official terms, are files that hold Source code mappings. Simply put, it is an information file. It is a separate map file that stores location information. That is, every position in the transformed code corresponds to the position before the transformation.

With this, when something goes wrong, the debugger will display the original code instead of the converted code.

Kangkang example, compare before and after use (using teacher Ruan Yifeng’s picture) :

How do I enable Source Map

Just add a line at the end of the transformed code. Take jSON2TS source code as an example:

//# sourceMappingURL=json2ts.js.map
Copy the code

Then go to Chrome developer Tools -> Settings and check Enable JavaScript Source Maps.

How do I generate the Source Map

  • Google’s Closure compiler

I went to his official website and translated it for him using Google Translate. Let’s take a look at his definition:

Eslint is an enhanced version of esLint that not only checks syntax, but also optimizes your code.

Here I have a new question:

  • I mean, something like that, projects are pretty common, right? Can you introduce it with the Webpack plugin?

I’ll cover this later in this article, but for now let’s continue with the Source map.

Format of the Source map

Let’s look at what the Source map file looks like (for a simple example) :

{version: 3, file: "out.js", sourceRoot: "", sources: ["foo.js", "bar.js"], names: [" SRC ", "maps", "are", "fun"], the mappings: "AAgBC, SAAQ, CAAEA}"Copy the code

This file is a JS object that can be read by the interpreter. Let’s take a look at what his various attributes mean:

  • Version: Indicates the Source map version, which is 3.

  • File: indicates the converted file name.

  • SourceRoot: Directory of the file before conversion. This item is empty if it is in the same directory as the file before the conversion.

  • Sources: indicates the file before conversion. The item is an array indicating that there may be multiple file merges.

  • Names: Names of all variables and attributes before conversion.

  • Mappings: STRING that records location information.

Let’s talk briefly about the mapping property, which maps the locations of two files one by one.

  • Use a semicolon (;) Each semicolon corresponds to a line of converted source code.

  • Use a comma (,) to indicate position correspondence, and each comma corresponds to a position in the converted source code.

  • VLQ code is used to represent the position conversion, which represents the corresponding source position before the conversion.

Here’s an example:

mappings:"AAAAA,BBBBB; CCCCC"Copy the code

The converted source code is divided into two lines, the first line has two positions and the second line has one position.

About the location of the principle and VLQ Source code, I will not elaborate here, interested students can go to see Ruan Yifeng teacher JavaScript Source Map details.

Now, let’s go back to the two questions mentioned above:

  • Does Webpack have a source map configuration?

  • In terms of optimizing code, how did he do that?

Webpack source map

Webpack has Settings for source map, that is, configuring devTool.

The simplest configuration is:

  devtool: 'source-map'
Copy the code

Of course you can also use the SourceMapDevToolPlugin for more granular configuration. View source-map-loader to process the existing source map.

Common configuration information is as follows:

  • Eval: Generated code Each module is executed by eval, and @sourceURL exists

  • Cheap-eval-source-map: Conversion code (inline) Each module is executed by EVAL, and sourcemap acts as a dataURL for Eval

  • Cheap-module-eval-source-map: The original code (inline only) does the same thing, but with higher quality and lower performance

  • Eval-source-map: the original code does the same thing, but with the highest quality and lowest performance

  • Cheap -source-map: The sourcemap generated by the conversion code (inline) has no column mapping, and the Sourcemap generated from loaders is not used

  • Cheap-module-source-map: The original code (inline only) is the same as above except for each line characteristic mapped from the Loader

  • Source-map: The best sourcemap quality of the original code has complete results, but is slow.

reference

JavaScript Source Map details

What is the Closure compiler?

Break the casserole: Sourcemap in Webpack

webpack Devtool