logo标签列表

使用Browserify保留原始的sourcemap

browserifysource-maps
13

假设我有一个模块，其源代码不是ECMA 5（例如它是Coffescript或Typescript或其他语言编写的），并以编译形式与源映射一起分发。我该如何将此源映射包含在Browserify打包中？

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

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

"main.js.map"没有被browserify使用。也就是说，browserify打包的源映射指向了 "main.js"，而没有使用描述 "main.ts" 的原始映射。

对于大多数转换步骤来说，通常有一种方法可以输入由先前步骤生成的源映射，但是否有一种方法可以在已经存在源映射的情况下，仅保留它们在原始输入文件上的信息呢？

可能是保留使用Browserify后的原始TypeScript源映射的重复问题。 - Justin Howard
1
看到那个问题 - 答案至少已经过时了，因为语法不再被 Browserify 支持，但我甚至没有尝试通过 uglify/minify 来传递它。只是使用 {debug: true} 的普通的 browserify 生成源映射，没有参考原始文件。 - Jamie Treworgy
5个回答
7
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中的文件。

3

我的设备如下:

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 和 dist/script.js.map。

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

需要安装Browserify、Exorcist和Sorcery（当然还需要 CoffeeScript 或 TypeScript 或其他相应工具）。

哇，谢谢。我花了一整天的时间来让这个工作，而你提供了最后一块拼图。我的解决方案有一个小变化，就是（1）在那个管道前面我使用了Webpack，（2）在管道的末尾我正在构建一个Chrome插件。Chrome插件不支持外部源映射文件（bug），所以我不得不调整sorcery来生成内联源映射。 - mararn1618
但是 ~temp/bfy/script.js.map 不会是原始的 TS 映射，而是 JS 映射吗？ - Josh M.
2
请查看 sourceify。
只需安装它：
npm i --save-dev sourceify

...并将其作为一个转换添加到package.json中：

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

...并且它可以完美运行。

我和 OP 一样遇到了同样的问题，但不幸的是 sourceify并不能解决它。请注意，我使用命令行中的browserify temp/script.js -t [ sourceify ] --debug | exorcist --root ../ dist/script.js.map > dist/script.js来编译来自tsc --outDir temp的temp/script.js文件。这太不幸了。 - Fabio Iotti
1
尝试以下操作：
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));
});

注意：更改路径以匹配您的项目！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接