合并 JS 流时保留源映射（将 lib 依赖项与 browserify 捆绑包连接）

Posted 2023-02-19

【中文标题】合并 JS 流时保留源映射（将 lib 依赖项与 browserify 捆绑包连接）

【英文标题】：Preserving sourcemaps when merging JS streams (to concat lib dependencies with browserify bundle)

【发布时间】：2016-04-08 05:52:21

【问题描述】：

在我当前的工作流程中，我需要创建 browserify 包，但还希望将非 commonjs js 库连接到文件的开头以公开全局变量，同时减少 http 请求的数量和 js 文件的大小。 （其他包也可能需要其中一些库）

我目前有一个 gulp 任务，它创建 browserify 包并将任何所需的库连接到输出文件的开头，但是我发现在合并流时，我的源映射正在中断，并且在 web 检查器中;生成的地图仅显示预丑化的 browserify 包，而不是单个 js 模块。

var gulp          = require("gulp"),
buffer            = require('vinyl-buffer'),
gulpif            = require("gulp-if"),
sourcemaps        = require("gulp-sourcemaps"),
merge             = require('merge-stream'),
concat            = require('gulp-concat'),
uglify            = require("gulp-uglify")
livereload        = require("gulp-livereload");

// compile scripts
gulp.task("scripts", function() 
  "use strict";

  // Iterate over bundles
  var tasks = config.browserifyBundles.map(function(item)

    // Use entry file for output file name
    var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); 
    var browserifyStream = browserify(
      entries: item.mainfile,
      debug: env !== "production"
    ).bundle()
    .on("error", notify.onError())
    .pipe(source(outputName))
    .pipe(buffer())
    .pipe(gulpif(env !== "production", sourcemaps.init()))
    .pipe(gulpif(env !== "production", sourcemaps.write()));

    // Get files to concat stream from json array
    var libStream = gulp.src(item.concat);

    return merge(libStream, browserifyStream)
      .pipe(gulpif(env !== "production", sourcemaps.init(loadMaps: true)))
      .pipe(concat(outputName))
      .pipe(uglify())
      .pipe(gulpif(env !== "production", sourcemaps.write()))
      .pipe(gulp.dest(config.projectDir + "js/"))
      .pipe(notify("updated"))
      .pipe(livereload());
  );


  // create a merged stream
  es.merge.apply(null, tasks);
);

（请注意，如果存在多个捆绑包，我的任务还读取配置 json 数组以构建多个捆绑包）

有没有办法可以保留预合并流中的源映射？ loadmaps 设置为 true 似乎不起作用。

另外，作为一个健全的检查，我的方法是否被认为是明智的？我是否错过了一些非常简单的方法来实现我想要的结果？

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！

道歉@AndreasNiedermair - 感谢您的编辑

【参考方案1】：

确保以下行位于管道的开头，这应该正确保留源映射。

.pipe(gulpif(env !== "production", sourcemaps.init()))

【讨论】：

与一年零七个月前相比，我恐怕已经进步了不少！当我有时间时，我会看看是否可以检查它是否有效，但非常感谢您的回答。如果它现在有效，我会告诉你并接受你的回答:)

哇！没想到这么老了哈哈