来源地图

这是一个生成和消费源映射格式的库这里描述。。。 .

带节点使用

$ npm install @cspotcode/source-map

在网络上使用

<script src="https://unpkg.com/[email protected]/dist/source-map.js"></script>
<script>
    sourceMap.SourceMapConsumer.initialize({
        "lib/mappings.wasm": "https://unpkg.com/[email protected]/lib/mappings.wasm"
    });
</script>

实例

正在使用源地图

const rawSourceMap = {
  version: 3,
  file: 'min.js',
  names: ['bar', 'baz', 'n'],
  sources: ['one.js', 'two.js'],
  sourceRoot: 'http://example.com/www/js/',
  mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA'
};

const whatever = await SourceMapConsumer.with(rawSourceMap, null, consumer => {

  console.log(consumer.sources);
  // [ 'http://example.com/www/js/one.js',
  //   'http://example.com/www/js/two.js' ]

  console.log(consumer.originalPositionFor({
    line: 2,
    column: 28
  }));
  // { source: 'http://example.com/www/js/two.js',
  //   line: 2,
  //   column: 10,
  //   name: 'n' }

  console.log(consumer.generatedPositionFor({
    source: 'http://example.com/www/js/two.js',
    line: 2,
    column: 10
  }));
  // { line: 2, column: 28 }

  consumer.eachMapping(function (m) {
    // ...
  });

  return computeWhatever();
});

生成源地图

深度引导 : 编译到 JavaScript, 并用源地图调试

带有 sourceNode( 高级 API)

function compile(ast) {
  switch (ast.type) {
  case 'BinaryExpression':
    return new SourceNode(
      ast.location.line,
      ast.location.column,
      ast.location.source,
      [compile(ast.left), " + ", compile(ast.right)]
    );
  case 'Literal':
    return new SourceNode(
      ast.location.line,
      ast.location.column,
      ast.location.source,
      String(ast.value)
    );
  // ...
  default:
    throw new Error("Bad AST");
  }
}

var ast = parse("40 + 2", "add.js");
console.log(compile(ast).toStringWithSourceMap({
  file: 'add.js'
}));
// { code: '40 + 2',
//   map: [object SourceMapGenerator] }

带有 sourceMapGenerator( 低水平 API)

var map = new SourceMapGenerator({
  file: "source-mapped.js"
});

map.addMapping({
  generated: {
    line: 10,
    column: 35
  },
  source: "foo.js",
  original: {
    line: 33,
    column: 2
  },
  name: "christopher"
});

console.log(map.toString());
// '{"version":3,"file":"source-mapped.js","sources":["foo.js"],"names":["christopher"],"mappings":";;;;;;;;;mCAgCEA"}'

API 密码

获取模块的引用 :

// Node.js
var sourceMap = require('source-map');

// Browser builds
var sourceMap = window.sourceMap;

// Inside Firefox
const sourceMap = require("devtools/toolkit/sourcemap/source-map.js");

源代码计算器

A 类 SourceMapConsumer 实例代表了我们可以查询的解析出源地图通过给它一个文件位置来获取关于原始文件位置的信息在生成源中.

SourceMapCummer. 初始化( 选项)

使用时 SourceMapConsumer 在节点之外,例如网络上,它需要从 URL 中知道要装入 lib/mappings.wasm您必须通知它电话 initialize 在构建前 SourceMapConsumer编号.

选项对象具有以下属性:

"lib/mappings.wasm"页:1 String 包含 lib/mappings.wasm 文档.

sourceMap.SourceMapConsumer.initialize({
  "lib/mappings.wasm": "https://example.com/source-map/lib/mappings.wasm"
});

新建源代码计算器( raw sourceMap)

唯一的参数是原始源图(可以是字符串) JSON.parse'd,或者一个物体. 根据谱系,源地图有: 以下属性:

version: 此地图的源地图的哪一个版本 .
sources: 原源文件的URL阵列.
names: 可由个人参考的识别器系列测绘.
sourceRoot: 可选。所有来源相对的 URL 根 .
sourcesContent: 可选。原始源文件的一组内容 .
mappings:一串包含实际绘图的基数64 VLQ.
file: 可选。此源图的生成文件名关联 .

已建成的豆子地图消费者的诺言被归还.

当 SourceMapConsumer 不再使用,你必须叫它 destroy 方法.

const consumer = await new sourceMap.SourceMapConsumer(rawSourceMapJsonData);
doStuffWith(consumer);
consumer.destroy();

或者,你可以使用 SourceMapConsumer.with 避免需要记住调用 destroy。。。 .

SourceMapConcumer.with (原始内容存档于2019-09-21)

构造新 SourceMapConsumer 从 rawSourceMap 财务报告和审定财务报表 sourceMapUrl (见《大会正式记录,第五十八届会议,补编第6号》) SourceMapConsumer 细节建筑师. 然后,援引 async function f(SourceMapConsumer) -> T 与新建的消费者,等待页:1 f 完成, 调用 destroy 消费者,和回报 f归来数值.

你以后不能用那个消费者 f 完毕!

通过使用 with,您不必记住手动呼叫 destroy 打开消费者,因为它会自动调用一次 f 完成 .

const xSquared = await SourceMapConsumer.with(
  myRawSourceMap,
  null,
  async function (consumer) {
    // Use `consumer` inside here and don't worry about remembering
    // to call `destroy`.

    const x = await whatever(consumer);
    return x * x;
  }
);

// You may not use that `consumer` anymore out here; it has
// been destroyed. But you can use `xSquared`.
console.log(xSquared);

SourceMapConsumer.prototype.dstroy () 互联网档案馆的存檔,存档日期2011-12-21

释放此源图消费者关联的由人工管理的主题数据.

consumer.destroy();

或者,你可以使用 SourceMapConsumer.with 避免需要记住调用 destroy。。。 .

SourceMapConsumer.prototype.compute ColumnSpans () 互联网档案馆的存檔,存档日期2013-12-20

为每个生成的映射计算最后一列。最后一栏是包容性.

// Before:
consumer.allGeneratedPositionsFor({ line: 2, source: "foo.coffee" })
// [ { line: 2,
//     column: 1 },
//   { line: 2,
//     column: 10 },
//   { line: 2,
//     column: 20 } ]

consumer.computeColumnSpans();

// After:
consumer.allGeneratedPositionsFor({ line: 2, source: "foo.coffee" })
// [ { line: 2,
//     column: 1,
//     lastColumn: 9 },
//   { line: 2,
//     column: 10,
//     lastColumn: 19 },
//   { line: 2,
//     column: 20,
//     lastColumn: Infinity } ]

SourceMap Consumer.prototype. 原始 POSTIONFOR( 生成的 POSTION)

返回生成的原始源、行和列信息提供了来源的行和列位置。唯一的参数是一个对象下列属性:

line: 生成源中的行号. 输入行号此库基于 1( 注意, 基本源图规格使用基于 0 的行号 -- -- 此库处理翻译).
column: 生成源中的列编号。栏号在这个库里是 0 的.
bias双向 SourceMapConsumer.GREATEST_LOWER_BOUND 或者说 SourceMapConsumer.LEAST_UPPER_BOUND。指定是否返回最近的大于或小于我们所寻找的元素, 如果无法找到准确的元素,则分别列出。默认为 SourceMapConsumer.GREATEST_LOWER_BOUND。。。 .

,对象的属性为:

source: 原始源文件, 如果此信息不是, 则无效可用.
line:原始来源中的行号,如果此信息是不详。线路编号为一等站.
column: 原始来源中的列号, 如果是无效的资料不详。栏号为0.
name:原始标识符,如果无法获得此信息,则无效.

consumer.originalPositionFor({ line: 2, column: 10 })
// { source: 'foo.coffee',
//   line: 2,
//   column: 2,
//   name: null }

consumer.originalPositionFor({ line: 99999999999999999, column: 999999999999999 })
// { source: null,
//   line: null,
//   column: null,
//   name: null }

SourceMapConsumer.prototype. 已生成 POSTIONFOR( 原作)

返回原始来源生成的行和列信息, 页:1 唯一的参数是一个对象下列属性:

source: 原始源文件名.
line:原出处中的行号. 行号是以一为基.
column:原出处中的栏号. 栏目数字为 0 .

,对象的属性为:

line:生成源中的行号,或为无. 线条数字基于 1 .
column:生成源中的列号,或为无效。这个列号为 0 .

consumer.generatedPositionFor({ source: "example.js", line: 2, column: 10 })
// { line: 1,
//   column: 56 }

SourceMapConsumer.prototype.all Generated PositionsFor(原始状态) 互联网档案馆的存檔,存档日期2011-12-21

返回原始源、行和列的所有生成的行和列信息, 并提供了栏目。如果没有提供列,请返回所有映射对应正在搜索的行或下一个最接近行上面有地图否则,返回所有对应给定行, 以及我们正在搜索的列或下一个最接近的列这有任何冲抵.

唯一的论点是具有以下属性的对象:

source: 原始源文件名.
line:原出处中的行号. 行号是以一为基.
column: 可选。原出处中的栏号. 这个列号为 0 .

并返回一系列对象,每个对象具有以下属性:

line:生成源中的行号,或为无. 线条数字基于 1 .
column:生成源中的列号,或为无效。这个列号为 0 .

consumer.allGeneratedpositionsfor({ line: 2, source: "foo.coffee" })
// [ { line: 2,
//     column: 1 },
//   { line: 2,
//     column: 10 },
//   { line: 2,
//     column: 20 } ]

SourceMapConsumer.prototype.has ContentsOf All sources () 互联网档案馆的存檔,存档日期2013-12-21

如果我们有包含在其中的每个源的嵌入源内容, 返回真实值原始地图,否则是虚假的.

换句话说,如果这种方法返回 true,则 consumer.sourceContentFor(s) 每一个来源都会成功 s 内 consumer.sources。。。 .

// ...
if (consumer.hasContentsOfAllSources()) {
  consumerReadyCallback(consumer);
} else {
  fetchSources(consumer, consumerReadyCallback);
}
// ...

SourceMapConsumer.prototype.sourceContentFor(出自[,还原NullOnMissing])

返回提供源的原始源内容。唯一一个参数是原始源文件的 URL.

如果找不到给定源的源内容, 那么错误是抛出。可选的,通过 true 作为第二段 null 已返回换句话说.

consumer.sources
// [ "my-cool-lib.clj" ]

consumer.sourceContentFor("my-cool-lib.clj")
// "..."

consumer.sourceContentFor("this is not in the source map");
// Error: "this is not in the source map" is not in the source map

consumer.sourceContentFor("this is not in the source map", true);
// null

SourceMapConsumer.prototype.eachMapping(召回、上下文、顺序)

在原始来源/行/栏与栏之间的每次绘图上以斜线表示在此源图中生成行/列.

callback: 每一个映射时称为函数。地图有表单 { source, generatedLine, generatedColumn, originalLine, originalColumn, name }
context: 可选。如果指定,此对象将是 this 每次这样 callback 名为.
order双向 SourceMapConsumer.GENERATED_ORDER 或者说 SourceMapConsumer.ORIGINAL_ORDER。指定您是否想要覆盖按生成文件的行/列顺序或原作的出处/行/栏顺序分别是. 默认为 SourceMapConsumer.GENERATED_ORDER。。。 .

consumer.eachMapping(function (m) { console.log(m); })
// ...
// { source: 'illmatic.js',
//   generatedLine: 1,
//   generatedColumn: 0,
//   originalLine: 1,
//   originalColumn: 0,
//   name: null }
// { source: 'illmatic.js',
//   generatedLine: 2,
//   generatedColumn: 0,
//   originalLine: 2,
//   originalColumn: 0,
//   name: null }
// ...

源代码集

SourceMapGenerator的一例代表着一个源图,它正在逐步建造.

新建 SourceMapGenerator ([从 SourceMap 开始])

您可以以下列属性通过对象:

file: 此源图是生成源的文件名有关.
sourceRoot: 此源图中所有相对 URL 的根 .
skipValidation: 可选。何时 true,将绘图验证功能禁用为它们是添加的。这可以提高性能,但应该用于作为最后手段。即使这样,人们也应该避免使用这面旗帜进行测试,如果可能的话.

var generator = new sourceMap.SourceMapGenerator({
  file: "my-generated-javascript-file.js",
  sourceRoot: "http://example.com/app/js/"
});

SourceMapGenerator. from SourceMap( 源代码MapCumers) 互联网档案馆的存檔,存档日期2011-12-21

创建新 SourceMapGenerator 从现有的 SourceMapConsumer 举个例子.

sourceMapConsumer 源图.

var generator = sourceMap.SourceMapGenerator.fromSourceMap(consumer);

SourceMapGenerator.prototype.add 映射(映射)

在生成的源行和列中添加单个映射此源图的源行和列正在创建中。映射对象应具有下列属性:

generated: 具有生成行和列位置的对象.
original:具有原行和列位置的物体.
source:原始源文件(与源Root有关).
name: 此绘图的可选原始符号名称 .

generator.addMapping({
  source: "module-one.scm",
  original: { line: 128, column: 0 },
  generated: { line: 3, column: 456 }
})

SourceMapGenerator.prototype. set 源代码(源代码,源代码)

设置原始源文件的源内容 .

sourceFile 原始源文件的 URL.
sourceContent 源文件的内容.

generator.setSourceContent("module-one.scm",
                           fs.readFileSync("path/to/module-one.scm"))

SourceMapGenerator.prototype.appSourceMap(源mapconcumer [, sourceFile [, sourceMapPath]]) 互联网档案馆的存檔,存档日期2013-12-20

对源文件应用 SourceMap . 使用提供了 SourceMap 。注:结果绘图的分辨率是此地图和所提供的地图的最小值.

sourceMapConsumer: 要应用的 SourceMap .
sourceFile: 可选。源文件的文件名 . 如果省略,则使用源Mapconcumer. 如果文件存在,则将使用该文件. 否则将出现错误.
sourceMapPath: 可选。源图路径的目录将适用。如果相对,则相对SourceMap.

当两个 sourceMaps 不在同一时需要此参数目录和要应用的 SourceMap 包含相对源路径。如果是,则需要重写这些相对源路径相对 SourceMap .

如果省略,则假定SourceMaps都在同一目录中, 因此不需要重写。 (供应) '.' (b) 效果相同。 )

SourceMapGenerator.prototype.toString () 页面存档备份,存于互联网档案馆

将源地图生成到字符串中.

generator.toString()
// '{"version":3,"sources":["module-one.scm"],"names":[],"mappings":"...snip...","file":"my-generated-javascript-file.js","sourceRoot":"http://example.com/app/js/"}'

源节点

SourceNodes提供了一种抽象过插入和/或调取的方法生成的 JavaScript 源代码片段,同时维护行和这些片断和原始来源之间的列信息代码。这是有用的,因为编译器最后的中间表示可能在输出生成的JS和源图之前使用.

新建源节点([行,列,源 [,块 [,名)])

line: 与此源节点相关的原始行号, 如果与原线无关线路编号为一等站.
column: 与此源节点相关的原始列号, 或为无如果和原列无关的话栏号以 0 为基础.
source:原始源文件名;如果没有提供文件名,则无效.
chunk: 可选。立即传递给 SourceNode.prototype.add,参见见下文.
name: 可选。原始标识符.

var node = new SourceNode(1, 2, "a.cpp", [
  new SourceNode(3, 4, "b.cpp", "extern int status;\n"),
  new SourceNode(5, 6, "c.cpp", "std::string* make_string(size_t n);\n"),
  new SourceNode(7, 8, "d.cpp", "int main(int argc, char** argv) {}\n"),
]);

SourceNode. from StringWith SourceMap(代码,源Mapconcumer[,相亲Path]) 互联网档案馆的存檔,存档日期2013-12-21

从生成的代码创建 sourceNode 和一个 sourceMapCummer .

code: 生成的代码
sourceMapConsumer 生成代码的 sourceMap
relativePath 相对源的可选路径 sourceMapConsumer 应该是相对的.

const consumer = await new SourceMapConsumer(fs.readFileSync("path/to/my-file.js.map", "utf8"));
const node = SourceNode.fromStringWithSourceMap(fs.readFileSync("path/to/my-file.js"), consumer);

SourceNode.prototype.add(圆)

在此源节点上添加一整块生成的JS.

chunk: 生成 JS 代码的字符串片段, 另一个实例 SourceNode,或者每个成员都是其中之一的数组.

node.add(" + ");
node.add(otherNode);
node.add([leftHandOperandNode, " + ", rightHandOperandNode]);

SourceNode.prototype.prepend(chunk) 页面存档备份,存于互联网档案馆

将大量生成的JS投入到这个源节点.

chunk: 生成 JS 代码的字符串片段, 另一个实例 SourceNode,或者每个成员都是其中之一的数组.

node.prepend("/** Build Id: f783haef86324gf **/\n\n");

SourceNode.prototype.set source Content(源文件,源文件) 源代码

设置源文件的源内容。这将添加到 SourceMap 输入 sourcesContent 字段.

sourceFile: 源文件的文件名
sourceContent: 源文件的内容

node.setSourceContent("module-one.scm",
                      fs.readFileSync("path/to/module-one.scm"))

SourceNode.prototype.walk(fn) (英语)

走过这个节点的JS树片段及其子孙. 走路时函数为JS的每个片段调用一次,通过片段和其原始相关来源的行/列位置.

fn:相向函数.

var node = new SourceNode(1, 2, "a.js", [
  new SourceNode(3, 4, "b.js", "uno"),
  "dos",
  [
    "tres",
    new SourceNode(5, 6, "c.js", "quatro")
  ]
]);

node.walk(function (code, loc) { console.log("WALK:", code, loc); })
// WALK: uno { source: 'b.js', line: 3, column: 4, name: null }
// WALK: dos { source: 'a.js', line: 1, column: 2, name: null }
// WALK: tres { source: 'a.js', line: 1, column: 2, name: null }
// WALK: quatro { source: 'c.js', line: 5, column: 6, name: null }

SourceNode.prototype.walk 源代码(fn)

走过SourceNodes树. 每个都叫行走功能源文件内容并被传递文件名和源内容 .

fn:相向函数.

var a = new SourceNode(1, 2, "a.js", "generated from a");
a.setSourceContent("a.js", "original a");
var b = new SourceNode(1, 2, "b.js", "generated from b");
b.setSourceContent("b.js", "original b");
var c = new SourceNode(1, 2, "c.js", "generated from c");
c.setSourceContent("c.js", "original c");

var node = new SourceNode(null, null, null, [a, b, c]);
node.walkSourceContents(function (source, contents) { console.log("WALK:", source, ":", contents); })
// WALK: a.js : original a
// WALK: b.js : original b
// WALK: c.js : original c

SourceNode.prototype.join (sep) (英语)

喜欢 Array.prototype.join 除了源节点. 插入分隔符每一个源节点的孩子之间.

sep曰:分会者.

var lhs = new SourceNode(1, 2, "a.rs", "my_copy");
var operand = new SourceNode(3, 4, "a.rs", "=");
var rhs = new SourceNode(5, 6, "a.rs", "orig.clone()");

var node = new SourceNode(null, null, null, [ lhs, operand, rhs ]);
var joinedNode = node.join(" ");

SourceNode.prototype.取而代之的权利(平面,替换)

打电话 String.prototype.replace 在最右边的源片段。有用用于从源节点等端对白空间进行裁剪.

pattern:要替换的模式.
replacement:用来替换图案的东西.

// Trim trailing white space.
node.replaceRight(/\s*$/, "");

SourceNode.prototype.toString () 互联网档案馆的存檔,存档日期2013-12-21

返回此源节点的字符串代表。走过树上将各种片段组合成一串.

var node = new SourceNode(1, 2, "a.js", [
  new SourceNode(3, 4, "b.js", "uno"),
  "dos",
  [
    "tres",
    new SourceNode(5, 6, "c.js", "quatro")
  ]
]);

node.toString()
// 'unodostresquatro'

SourceNode.prototype.toString With sourceMap ([从SourceMap开始]) 互联网档案馆的存檔,存档日期2013-12-20

返回源节点树的字符串表示式,加一 SourceMapGenerator,它包含生成到原始来源.

这些论点与对 new SourceMapGenerator。。。 .

var node = new SourceNode(1, 2, "a.js", [
  new SourceNode(3, 4, "b.js", "uno"),
  "dos",
  [
    "tres",
    new SourceNode(5, 6, "c.js", "quatro")
  ]
]);

node.toStringWithSourceMap({ file: "my-output-file.js" })
// { code: 'unodostresquatro',
//   map: [object SourceMapGenerator] }

版本	发布日期	距今
`0.8.0`latest	2021/07/22	5 年前
`0.8.0-0`	2021/07/21	5 年前

@cspotcode/source-map