1

嗨这个问题难倒我。

我想知道，在从 TS 编译并使用 Browserify 之后，我是否可以让我的 SourceMaps（来自 gulp-sourcemaps）一直指向我的 TS 文件。

目前我让它工作，所以我使用 tsify 来编译 TS，然后我将它全部捆绑到一个 all.js 中，然后将它 uglify（缩小）到一个 all.min.js 中。我也有 SourceMaps，但只是从缩小版本映射到 all.js。

我已经为此搜索了很多。我之前也做过 SourceMaps，从 JS 缩小到我的 TS，但在那种情况下我没有使用 Browserify。

我当前的 Gulp 任务：

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));
});

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

谢谢！

4

1 回答 1

8

我想到了！！几小时后……

就是这个：

    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));
});

path.mainTs 是入口 TS 文件（main.ts、index.ts、app.ts 等）。

调试标志告诉 Browserify 编写源映射。

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

请注意，如果您在调试时使用的是完整的 js，而不是缩小版，那么您可以跳过带有源映射的两行。

编辑：为了避免最后的大型 JS 文件（因为它包含内联源映射），只需 sourcemaps.write('/somePath')。

于 2016-03-23T20:06:27.433 回答