JavaScript Map 文件

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript Map 文件

作者：迹忆客最近更新：2023/03/10 浏览次数：

在 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));

输出：

使用 example.js 作为输出

我们将把 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>