模具源图

由Frida项目维持至 上游 来合并待定公关.

关于

将一个近乎完美的原始地图 制作成一个.

browserify()
  .require(require.resolve('./project/js/main.js'), { entry: true })
  .bundle({ debug: true })

  // will show all source files relative to jsRoot inside devtools
  .pipe(mold.transformSourcesRelativeTo(jsRoot))
  .pipe(fs.createWriteStream(bundlePath));

完整实例 这里。 。 。 .

安装

npm install mold-source-map

API 密码

变换

变形还原了双层流 因此很容易被线接入一个捆绑器 流出产生的捆绑, 喜欢 浏览器。 。 。 .

变换( 函数映射( sourcemap [, callback] ) qq)

这是最通用和最强的特性,因为它可以将整个源映射注释替换为另一个 String。 。 。 .

它需要一个地图函数作为输入 sourcemap 参数具有关于现有源图的所有信息和许多函数.

可选 callback 可使用最后源地图注释调回。 如果它被赋予, 转变会 同步引用函数, 否则您可以返回最后的源地图注释 .

有段话要说 实例 显示如何使用此功能来写入外部映射文件并指向浏览器 :

function mapFileUrlComment(sourcemap, cb) {
  
  // make source files appear under the following paths:
  // /js
  //    foo.js
  //    main.js
  // /js/wunder
  //    bar.js 
  
  sourcemap.sourceRoot('file://'); 
  sourcemap.mapSources(mold.mapPathRelativeTo(jsRoot));

  // write map file and return a sourceMappingUrl that points to it
  fs.writeFile(mapFilePath, sourcemap.toJSON(2), 'utf-8', function (err) {
    if (err) return console.error(err);
    cb('//@ sourceMappingURL=' + path.basename(mapFilePath));
  });
}

browserify()
  .require(require.resolve('./project/js/main.js'), { entry: true })
  .bundle({ debug: true })
  .pipe(mold.transform(mapFileUrlComment))
  .pipe(fs.createWriteStream(bundlePath));

此示例 使用同步操作实现相同.

方便变化

以下将改变特殊用途案例。 所有这些案例都可以在普遍改革后实施.

变换源代码( root: String)

/**
 * Adjusts all sources paths inside the source map contained in the content that is piped to it.
 *
 * Example: bundleStream.pipe(mold.sourcesRelative(root)).pipe(fs.createWriteStream(bundlePath))
 *
 * @name sourcesRelative
 * @function
 * @param root {String} The path to make sources relative to.
 * @return {Stream} A duplex stream that writes out content with source map that had all sources paths adjusted.
 */

不稳定的 API

更定制/更先进的API将会被曝光/正在曝光,但波动仍然很大.

看看这个 index.js 来了解即将到来/已经到来.