假设我有一个源代码不是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”的原始地图
对于大多数变换，有一种方法可以输入前一步生成的源地图，但是当源地图已经存在时，有没有办法在原始输入文件上保留它们？
这似乎是Browserify的错误/非功能：
https://github.com/substack/node-browserify/issues/772
回答我自己的问题，因为很难跟踪google对此问题的任何讨论，并且在Browserify文档中没有提及它。
我的设置如下：
tsc --project tsconfig.script.json --outDir ~temp/ts
编译 SRC / script.ts 至 〜温度/ TS /的script.js 和 〜温度/ TS / script.js.map。
browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js
编译 〜温度/ TS /的script.js 至 〜温度/ BFY /的script.js 和 〜温度/ BFY / script.js.map。
sorcery --input ~temp/bfy/script.js --output dist/script.js
读 〜温度/ BFY /的script.js;认定 〜温度/ BFY / script.js.map + 〜温度/ TS / script.js.map，最后输出 DIST /的script.js 和 DIST / script.js.map。
该 DIST / script.js.map 文件确实引用原文 SRC / script.ts 文件。
需要 Browserify， 祓魔师 和 巫术 （当然还有CoffeeScript或TypeScript等）。
请尝试以下方法：
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));
});
注意：更改路径以匹配您的项目！
看一下 sourceify。
只需安装它：
npm i --save-dev sourceify
...并将其添加为转换 package.json：
"browserify": {
"transform": [
"sourceify"
]
}
......它只是工作。