TypeScript + Browserify + SourceMaps？

Question

嗨，这个问题把我难住了。

我想知道，在从TS编译并使用Browserify之后，我是否可以获得我的SourceMaps (来自gulp-sourcemaps)来指向我的TS文件。

目前，我让它正常工作，所以我使用tsify编译TS，然后将它捆绑到一个all.js中，然后将它丑化(缩小)到all.min.js中。我也有SourceMaps，但只能从精简版本映射到all.js。

我已经为此搜索了相当多的内容。我以前也做过从JS缩小到TS的SourceMaps，但在这种情况下我没有使用Browserify。

我目前的工作任务是：

gulp.task('scripts', function(){
    return browserify(paths.mainJs)
        .plugin(tsify)
        .bundle()
        .on('error',console.error.bind(console))
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

请注意，这里的一个大问题是，源地图调用之间的所有内容都需要支持gulp-sourcemaps地图，而Browserify则不支持。Gulp也有一个Typescript编译器，但是我该如何使用Browserify呢？

谢谢!

Answer 1

我想通了！下班后...

就是这样：

    gulp.task('scripts', function(){
    return browserify(paths.mainTs,{debug: true})
        .on('error',console.error.bind(console))
        .plugin(tsify)
        .bundle()
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

paths.mainTs是入门TS文件(main.ts、index.ts、app.ts等等)。

debug标志告诉Browserify写入源映射。

然后，我在缩小之前加载这些地图，然后将它们写在最小版本上。

请注意，如果您在调试时使用完整的js，而不是精简的js，那么您可以跳过sourcemaps中的这两行。

编辑:为了避免在末尾出现大的JS文件(因为它包含内嵌的源地图)，只需sourcemaps.write('/somePath')即可。