使用 Browserify 保留原始源图

Question

假设我有一个模块，其源代码不是 ECMA 5（例如，它是 Coffescript 或 Typescript 或其他），并且以带有源映射的编译形式分发。如何在 Browserify 包中包含这个源映射？

例如想象一个具有单一依赖项的项目：

index.js
    node_modules
         typescript_module
              (main.ts)
              dist
                  main.js
                  main.js.map

browserify 不使用“main.js.map”。也就是说，browserify 捆绑源映射映射到“main.js”，而不是推迟到描述“main.ts”的原始映射

对于大多数转换，有一种方法可以输入上一步生成的源映射，但是当源映射已经存在时，有没有办法将它们保留在原始输入文件中？

Answer 1

这似乎是 Browserify 的错误/非功能：

https://github.com/substack/node-browserify/issues/772

回答我自己的问题，因为很难找到与谷歌有关此问题的任何讨论，并且在 Browserify 文档中没有提及它。

Answer 2

我的设置如下：

tsc --project tsconfig.script.json --outDir ~temp/ts

将src/script.ts编译成~temp/ts/script.js和~temp/ts/script.js.map .

browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js

将~temp/ts/script.js编译成~temp/bfy/script.js和~temp/bfy/script.js.map。

sorcery --input ~temp/bfy/script.js --output dist/script.js

读取 ~temp/bfy/script.js;找到~temp/bfy/script.js.map + ~temp/ts/script.js.map，最后输出dist/script.js em> 和 dist/script.js.map.

dist/script.js.map 文件确实引用了原始 src/script.ts 文件。

需要 Browserify、Exorcist 和 Sorcery（当然还有 CoffeeScript 或 TypeScript 等）。

Answer 3

如果您使用的是您可以控制的 TypeScript 库（例如在 lerna monorepo 中），您可以在 tsconfig.json 中启用以下 compilerOptions：

{
  "compilerOptions": {
    "sourceMap": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    // ...
  }
}

browserify 现在应该使用并转换内联源映射。

browserify 将不读取引用另一个文件的源映射，它只会使用内联源映射和内联源。我已经在 GitHub browserify/browserify#772 上的参考问题中写过这个。

或者，如果您无法控制 TypeScript 库的源代码，但仍希望在 DevTools 中查看原始源代码，则可以使用另一个答案中提到的 sourceify 库。但是，我必须对其进行修补才能正常工作，并提交了pull request。它尚未合并（在撰写本文时）。如果你想自己测试，可以直接从我的分支安装：

npm install https://github.com/jeremija/sourceify#sources-content

确保使用全局变换-g [ sourceify ]，因为Browserify 中的默认变换(-t) 不会修改node_modules 中的文件。

Answer 4

看看sourceify。

只需安装它：

npm i --save-dev sourceify

...并将其作为转换添加到package.json:

"browserify": {
  "transform": [
    "sourceify"
  ]
}

...它只是工作。

Answer 5

尝试以下方法：

var gulp        = require("gulp"),
    browserify  = require("browserify"),
    tsify       = require('tsify'),
    source      = require("vinyl-source-stream"),
    sourcemaps  = require("gulp-sourcemaps"),
    buffer      = require("vinyl-buffer"),
    uglify      = require("gulp-uglify"),
    header      = require("gulp-header");

var settings = {
  projectName : "test"
};    

gulp.task("bundle", function() {

  var mainTsFilePath = "src/main.ts";
  var outputFolder   = "bundle/src/";
  var outputFileName = settings.projectName + ".min.js";
  var pkg            = require("./package.json");

  var banner = [
    "/**",
    " * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>",
    " * Copyright (c) 2015 <%= pkg.author %>",
    " * <%= pkg.license %>",
    " */", ""
  ].join("\n");

  var bundler = browserify({
    debug: true,
    standalone : settings.projectName
  });

  // TS compiler options are in tsconfig.json file
  return bundler.add(mainTsFilePath)
                .plugin(tsify)
                .bundle()
                .pipe(source(outputFileName))
                .pipe(buffer())
                .pipe(sourcemaps.init({ loadMaps: true }))
                .pipe(uglify())
                .pipe(header(banner, { pkg : pkg } ))
                .pipe(sourcemaps.write('./'))
                .pipe(gulp.dest(outputFolder));
});

注意：更改路径以匹配您的项目！