如何解释源映射映射？

Question

假设我有这个样式表：

.d1
    width: 10px
    .d2
        width: 20px

它会产生以下 css 代码（带有nested输出样式）：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

源映射 ( v3) 包含以下映射：

AAAA,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,IAAK,GAES;EAHzB,AAEI,GAFD,CAEC,GAAG,CAAC;IACA,KAAK,EAAE,IAAK,GAAG

使用此服务对其进行解码后，我得到：

([0,0](#0)=>[0,0]) | ([0,0](#0)=>[0,0]) | ([0,3](#0)=>[0,3]) | ([0,4](#0)=>[0,4])
([1,4](#0)=>[1,2]) | ([1,9](#0)=>[1,7]) | ([1,11](#0)=>[1,9]) | ([1,16](#0)=>[1,13]) | ([3,25](#0)=>[1,16])
([0,0](#0)=>[2,2]) | ([2,4](#0)=>[2,2]) | ([0,3](#0)=>[2,5]) | ([2,4](#0)=>[2,6]) | ([2,7](#0)=>[2,9]) | ([2,8](#0)=>[2,10])
([3,8](#0)=>[3,4]) | ([3,13](#0)=>[3,9]) | ([3,15](#0)=>[3,11]) | ([3,20](#0)=>[3,15]) | ([3,23](#0)=>[3,18])

源代码的生成方式与( )类似。node-sasslibsass

我的理解是，这些是原始文件和结果文件中的点对。但我们以第二行的最后一对为例：([3,25](#0)=>[1,16])。第 3 行第 25 列？这有点出乎你的意料，你不觉得吗？

我做错了吗？或者源地图不正确？如果可以的话，您能建议生成正确源映射的方法吗？

Answer 1

有一个很棒的工具，您不仅可以按照此处的libsass说明使用它。

请注意，您需要一个文件，其中嵌入了作为多行注释的源映射，并且sourcesContent其中包含字段，如下所示：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICB3aWR0aDogMTBweDtcbiAgICAuZDIge1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICB9XG59XG4iXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

您只需将其粘贴到“输出”字段中，单击“分析”，即可完成设置。在此之前输入字段中的内容并不重要。它被源映射中的内容替换。使用箭头键在映射之间切换。

让我们看看如何使用 ruby​​ 的 gem 做到这一点sass：

Gemfile：

source 'https://rubygems.org'
gem 'sass'

package.json：

{
  "dependencies": {
    "convert-source-map": "^1.3.0"
  }
}

1.scss：

.d1 {
    width: 10px;
    .d2 {
        width: 20px;
    }
}

1.js：

var convert = require('convert-source-map');
var fs = require('fs');
console.log(
    convert.fromJSON(
            fs.readFileSync('1.css.map')
    ).toComment()
    .replace(/^\/\//, '/*')
    .replace(/$/, ' */')
);

然后

$ bundle install && npm i
$ rm -f 1.css* && bundle exec sass --sourcemap=inline 1.scss 1.css
$ cat 1.css | head -n -1 && node 1.js
.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

将其放入输出字段即可。

工作流程有点复杂。但这是检查源映射的更轻松的方法，然后“手动”进行。我在这里说的是我自己的经历:)

如果您有 json 格式的源映射，例如：

{ version: 3,
  sourceRoot: '/path/to/dir',
  sources: [ '1.css' ],
  sourcesContent: [ 'body {\n    background: #ddd;\n}\ndiv {\n    width: 100px;\n    height: 100px;\n    margin: auto;\n    background: #666;\n}\n' ],
  names: [],
  mappings: 'AAAA,AAAA,IAAI,AAAC,CACD,UAAU,CAAE,IAAI,CACnB,AACD,AAAA,GAAG,AAAC,CACA,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CACnB' }

您可以将其转换为评论，如下所示：

var convertSourceMap = require('convert-source-map')
console.log(convertSourceMap.fromJSON(mapAsAString).toComment({multiline: true}));

PS 这里还有一些 工具 。以及源映射的介绍。另外，包可能会派上用场。sourcemap-codec