JavaScript Map 文件
在 Angular 或类似的 Web 框架中进行开发时，我们使用脚本化的 JavaScript 文件作为开发人员的版本选择。
最近，ES6 及其后续版本已经成为一种方便的 JavaScript 脚本形式，并且这些修改后的版本需要更少的代码行来定义与之前版本的 ES6 相同的功能。
所有浏览器均不兼容 ECMA Script 的最新更新，引入了 .map 文件，开发体验无与伦比。
我们通常将 JavaScript 文件的缩小后的 uglifying 文件用于生产用例的浏览器。
缩小的文件本质上是拥挤的，减少了空白，更具体地说，是功能性 js 文件的压缩格式。
正如我们所说，原始文件和缩小文件在文件尺寸和内容排列方面存在差异，源映射文件根据功能范围为每一行创建适当的映射。
映射约定以行和列的形式返回。此外，如果你使用 ES6 进行编码并使其可被所有浏览器读取，则源映射文件会将原始文件转换为更适合的编码格式。
从技术上讲，这就是源映射文件的工作方式，在这里我们将了解如何在本地生成此映射文件以及转换后原始文件的外观。
在 JavaScript 中，要启用源映射文件，我们需要安装 babel 或 webpack。我们将在这里使用 babel 来生成我们的源映射文件。
首先，我们将创建一个 index.html 来导入 example.js 文件。我们的 examplpe.js 将有一个汇总一些数字的函数，并且代码行符合 ES6 约定。
代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>
var add = (...arr) => {
return arr.reduce((sum, el) =>{
return sum+el;
}, 0)
}
console.log(add(1,2,3));
输出：
我们将把 index.html 和 example.js 两个文件保存在一个文件夹中（假设我们将其命名为 work）。
我们将打开 cmd 并将 babel 本地安装到这个工作目录中。命令是——
npm install @babel/cli @babel/core @babel/preset-env
点击回车后，你将获得一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹。
我们将需要另一个文件 .babelrc，该文件将包含以下几行来完成此任务。
// The file name would be ".babelrc" in the work directory
{
"presets": [
"@babel/preset-env"
]
}
下一个工作是在你的 package.json 文件中添加一个 npm 脚本。在你的 package.json 文件中已经分配了一些 dependencies。
当你首先安装 babel 软件包时，默认情况下会添加这些。因此附加的 npm 脚本将如下所示：
{
"dependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11"
},
"scripts": {
"start-babel": "babel example.js --out-file main.dist.js --source-maps"
}
}
在你的 package.json 文件中添加此部分后不久，转到 bash 并输入以下命令。
npm run start-babel
在此之后，你将拥有一个 main.dist.js 文件和一个名为 main.dist.js.map 文件的源文件。main.dist.js 文件将具有 example.js 文件的显式形式。
这个文件的最后一行会有一个注释部分，上面写着 *//# sourceMappingURL=main.dist.js.map*。这确保了映射过程成功运行。
// main.dist.js
"use strict";
var add = function add() {
for (var _len = arguments.length, arr = new Array(_len), _key = 0; _key < _len; _key++) {
arr[_key] = arguments[_key];
}
return arr.reduce(function (sum, el) {
return sum + el;
}, 0);
};
console.log(add(1, 2, 3));
//# sourceMappingURL=main.dist.js.map
// main.dist.js.map
{"version":3,"sources":["example.js"],"names":[],"mappings":";;AAAA,IAAI,GAAG,GAAG,SAAN,GAAM,GAAY;AAAA,oCAAR,GAAQ;AAAR,IAAA,GAAQ;AAAA;;AAClB,SAAO,GAAG,CAAC,MAAJ,CAAW,UAAC,GAAD,EAAM,EAAN,EAAY;AAC1B,WAAO,GAAG,GAAC,EAAX;AACH,GAFM,EAEJ,CAFI,CAAP;AAGH,CAJD;;AAKA,OAAO,CAAC,GAAR,CAAY,GAAG,CAAC,CAAD,EAAG,CAAH,EAAK,CAAL,CAAf","file":"main.dist.js","sourcesContent":["var add = (...arr) => {\r\n return arr.reduce((sum, el) =>{\r\n return sum+el;\r\n }, 0)\r\n}\r\nconsole.log(add(1,2,3));"]}
因此，在完成所有这些任务之后，我们的任务是检查原始文件 example.js 是否与传输的文件 main.dist.js 文件相似。
我们将把 html 文件的脚本目录从 example.js 更改为 main.dist.js 文件。我们的输出将与以前一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.dist.js"></script>
</body>
</html>
输出：
JavaScript 源映射文件在调试 JavaScript 和 CSS 文件方面取得了突破。特别是转换为可读代码并正确映射缩小和原始文件。
这就是 JavaScript 中的 .map 文件 如何使开发部分保持无错误。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
