# @cspotcode/source-map 中文文档规范地址：https://npmcn.com/package/%40cspotcode/source-map/ 版本：0\.8\.0 npm 元数据更新时间：2022-04-05T02:03:08.907Z 中文译文更新时间：2026-11-11T06:01:06.294Z 软件包许可：BSD-3-Clause 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40cspotcode/source-map 原文对照：https://npmcn.com/package/%40cspotcode/source-map/?lang=original 项目主页：https://github.com/cspotcode/source-map 源码仓库：https://github.com/cspotcode/source-map ## 关键信息（来自 npm 元数据） - 包体积（解压后）：195 kB，17 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - Node.js 要求：\>= 12 - 运行依赖：0 个 - 首次发布：2021-07-21T02:27:19.936Z - 最新版本发布：2021-07-21T21:00:17.440Z - 近 30 天下载量：3022（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：2（近 12 个月 0 个） ## 中文简介生成和消耗源地图 ## 安装 ```sh npm install @cspotcode/source-map ``` 也可以使用：`pnpm add @cspotcode/source-map`、`yarn add @cspotcode/source-map`、`bun add @cspotcode/source-map` ## README # 来源地图 [![Build status](https://img.shields.io/github/workflow/status/cspotcode/source-map/Continuous%20Integration)](https://github.com/cspotcode/source-map/actions?query=workflow%3A%22Continuous+Integration%22) [![Test coverage](https://codecov.io/gh/cspotcode/source-map/branch/master/graph/badge.svg)](https://codecov.io/gh/cspotcode/source-map) [![NPM](https://nodei.co/npm/@cspotcode/source-map.png?downloads=true&downloadRank=true)](https://www.npmjs.com/package/@cspotcode/source-map) 这是一个生成和消费源映射格式的库 [这里描述](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit)。。。 . ## 带节点使用 ``` $ npm install @cspotcode/source-map ``` ## 在网络上使用 ``` ``` * * * ## 目录 - [实例](https://npmcn.com/package/%40cspotcode/source-map/#readme-examples) - [正在使用源地图](https://npmcn.com/package/%40cspotcode/source-map/#readme-consuming-a-source-map) - [生成源地图](https://npmcn.com/package/%40cspotcode/source-map/#readme-generating-a-source-map) - [带有 sourceNode( 高级 API)](https://npmcn.com/package/%40cspotcode/source-map/#readme-with-sourcenode-high-level-api) - [带有 sourceMapGenerator( 低水平 API)](https://npmcn.com/package/%40cspotcode/source-map/#readme-with-sourcemapgenerator-low-level-api) - [API 密码](https://npmcn.com/package/%40cspotcode/source-map/#readme-api) - [源代码计算器](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumer) - [SourceMapCummer. 初始化( 选项)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerinitializeoptions) - [新建源代码计算器( raw sourceMap)](https://npmcn.com/package/%40cspotcode/source-map/#readme-new-sourcemapconsumerrawsourcemap) - [SourceMapConcumer.with (原始内容存档于2019-09-21)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerwith) - [SourceMapConsumer.prototype.dstroy () 互联网档案馆的存檔,存档日期2011-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypedestroy) - [SourceMapConsumer.prototype.compute ColumnSpans () 互联网档案馆的存檔,存档日期2013-12-20](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypecomputecolumnspans) - [SourceMap Consumer.prototype. 原始 POSTIONFOR( 生成的 POSTION)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypeoriginalpositionforgeneratedposition) - [SourceMapConsumer.prototype. 已生成 POSTIONFOR( 原作)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypegeneratedpositionfororiginalposition) - [SourceMapConsumer.prototype.all Generated PositionsFor(原始状态) 互联网档案馆的存檔,存档日期2011-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypeallgeneratedpositionsfororiginalposition) - [SourceMapConsumer.prototype.has ContentsOf All sources () 互联网档案馆的存檔,存档日期2013-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypehascontentsofallsources) - [SourceMapConsumer.prototype.sourceContentFor(出自\[,还原NullOnMissing\])](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypesourcecontentforsource-returnnullonmissing) - [SourceMapConsumer.prototype.eachMapping(召回、上下文、顺序)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapconsumerprototypeeachmappingcallback-context-order) - [源代码集](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgenerator) - [新建 SourceMapGenerator (\[从 SourceMap 开始\])](https://npmcn.com/package/%40cspotcode/source-map/#readme-new-sourcemapgeneratorstartofsourcemap) - [SourceMapGenerator. from SourceMap( 源代码MapCumers) 互联网档案馆的存檔,存档日期2011-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgeneratorfromsourcemapsourcemapconsumer) - [SourceMapGenerator.prototype.add 映射(映射)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgeneratorprototypeaddmappingmapping) - [SourceMapGenerator.prototype. set 源代码(源代码,源代码)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgeneratorprototypesetsourcecontentsourcefile-sourcecontent) - [SourceMapGenerator.prototype.appSourceMap(源mapconcumer \[, sourceFile \[, sourceMapPath\]\]) 互联网档案馆的存檔,存档日期2013-12-20](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgeneratorprototypeapplysourcemapsourcemapconsumer-sourcefile-sourcemappath) - [SourceMapGenerator.prototype.toString () 页面存档备份,存于互联网档案馆](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcemapgeneratorprototypetostring) - [源节点](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenode) - [新建源节点(\[行,列,源 \[,块 \[,名)\])](https://npmcn.com/package/%40cspotcode/source-map/#readme-new-sourcenodeline-column-source-chunk-name) - [SourceNode. from StringWith SourceMap(代码,源Mapconcumer\[,相亲Path\]) 互联网档案馆的存檔,存档日期2013-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodefromstringwithsourcemapcode-sourcemapconsumer-relativepath) - [SourceNode.prototype.add(圆)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypeaddchunk) - [SourceNode.prototype.prepend(chunk) 页面存档备份,存于互联网档案馆](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypeprependchunk) - [SourceNode.prototype.set source Content(源文件,源文件) 源代码](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypesetsourcecontentsourcefile-sourcecontent) - [SourceNode.prototype.walk(fn) (英语)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypewalkfn) - [SourceNode.prototype.walk 源代码(fn)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypewalksourcecontentsfn) - [SourceNode.prototype.join (sep) (英语)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypejoinsep) - [SourceNode.prototype.取而代之的权利(平面,替换)](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypereplacerightpattern-replacement) - [SourceNode.prototype.toString () 互联网档案馆的存檔,存档日期2013-12-21](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypetostring) - [SourceNode.prototype.toString With sourceMap (\[从SourceMap开始\]) 互联网档案馆的存檔,存档日期2013-12-20](https://npmcn.com/package/%40cspotcode/source-map/#readme-sourcenodeprototypetostringwithsourcemapstartofsourcemap) ## 实例 ### 正在使用源地图 ```js 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, 并用源地图调试**](https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/) #### 带有 sourceNode( 高级 API) ```js 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) ```js 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 密码获取模块的引用 : ```js // 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` 文档. ```js 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` 方法. ```js 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` 完成 . ```js 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 释放此源图消费者关联的由人工管理的主题数据. ```js consumer.destroy(); ``` 或者,你可以使用 `SourceMapConsumer.with` 避免需要记住调用 `destroy`。。。 . #### SourceMapConsumer.prototype.compute ColumnSpans () 互联网档案馆的存檔,存档日期2013-12-20 为每个生成的映射计算最后一列。最后一栏是包容性. ```js // 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`:原始标识符,如果无法获得此信息,则无效. ```js 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 . ```js 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 . ```js 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`。。。 . ```js // ... if (consumer.hasContentsOfAllSources()) { consumerReadyCallback(consumer); } else { fetchSources(consumer, consumerReadyCallback); } // ... ``` #### SourceMapConsumer.prototype.sourceContentFor(出自\[,还原NullOnMissing\]) 返回提供源的原始源内容。唯一一个参数是原始源文件的 URL. 如果找不到给定源的源内容, 那么错误是抛出。可选的,通过 `true` 作为第二段 `null` 已返回换句话说. ```js 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`。。。 . ```js 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`,将绘图验证功能禁用为它们是添加的。这可以提高性能,但应该用于作为最后手段。即使这样,人们也应该避免使用这面旗帜进行测试,如果可能的话. ```js 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` 源图. ```js var generator = sourceMap.SourceMapGenerator.fromSourceMap(consumer); ``` #### SourceMapGenerator.prototype.add 映射(映射) 在生成的源行和列中添加单个映射此源图的源行和列正在创建中。映射对象应具有下列属性: - `generated`: 具有生成行和列位置的对象. - `original`:具有原行和列位置的物体. - `source`:原始源文件(与源Root有关). - `name`: 此绘图的可选原始符号名称 . ```js generator.addMapping({ source: "module-one.scm", original: { line: 128, column: 0 }, generated: { line: 3, column: 456 } }) ``` #### SourceMapGenerator.prototype. set 源代码(源代码,源代码) 设置原始源文件的源内容 . - `sourceFile` 原始源文件的 URL. - `sourceContent` 源文件的内容. ```js 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 () 页面存档备份,存于互联网档案馆将源地图生成到字符串中. ```js 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`: 可选。原始标识符. ```js 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` 应该是相对的. ```js 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`,或者每个成员都是其中之一的数组. ```js node.add(" + "); node.add(otherNode); node.add([leftHandOperandNode, " + ", rightHandOperandNode]); ``` #### SourceNode.prototype.prepend(chunk) 页面存档备份,存于互联网档案馆将大量生成的JS投入到这个源节点. - `chunk`: 生成 JS 代码的字符串片段, 另一个实例 `SourceNode`,或者每个成员都是其中之一的数组. ```js node.prepend("/** Build Id: f783haef86324gf **/\n\n"); ``` #### SourceNode.prototype.set source Content(源文件,源文件) 源代码设置源文件的源内容。这将添加到 `SourceMap` 输入 `sourcesContent` 字段. - `sourceFile`: 源文件的文件名 - `sourceContent`: 源文件的内容 ```js node.setSourceContent("module-one.scm", fs.readFileSync("path/to/module-one.scm")) ``` #### SourceNode.prototype.walk(fn) (英语) 走过这个节点的JS树片段及其子孙. 走路时函数为JS的每个片段调用一次,通过片段和其原始相关来源的行/列位置. - `fn`:相向函数. ```js 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`:相向函数. ```js 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`曰:分会者. ```js 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`:用来替换图案的东西. ```js // Trim trailing white space. node.replaceRight(/\s*$/, ""); ``` #### SourceNode.prototype.toString () 互联网档案馆的存檔,存档日期2013-12-21 返回此源节点的字符串代表。走过树上将各种片段组合成一串. ```js 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`。。。 . ```js 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] } ``` ## 常见问题 ### @cspotcode/source-map 是什么？生成和消耗源地图 ### 如何安装 @cspotcode/source-map？在项目目录运行 npm install @cspotcode/source-map，或使用 pnpm add / yarn add / bun add。 ### @cspotcode/source-map 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cspotcode/source-map 支持 ESM 还是 CommonJS？以 CommonJS 形式发布，可以直接 require；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @cspotcode/source-map 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>= 12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @cspotcode/source-map 可以商用吗？ @cspotcode/source-map 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。 ### @cspotcode/source-map 的下载量有多少？根据 npm 官方下载统计，@cspotcode/source-map 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,022 次，日均约 101 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cspotcode/source-map 还在维护吗？最新版本 0\.8\.0 发布于 2021/07/22（5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。