Gulp Typescript + Browserify; 捆绑的源映射指向转换JS而不是源TS

Question

我正在开发一个Typescript项目，该项目被转换为ES5 JS，然后通过browserify运行以创建单个.js包和源图。 捆绑的源映射指向已转换的JS而不是源TS，即使我正在生成源映射，这些源映射在转换为JS时正确指向源TS。

就好像browserify忽略了指向TS代码的现有源图并创建了自己的新映射到已编译的JS代码。

以下是我的gulp任务供参考 - 代码被编译到临时文件夹，然后从那里进行浏览。 这使用browserify-incremental来支持增量编译。

谢谢！

注意：通过其他SO问题，我已经尝试过使用tsify ，根据我的理解，它不适用于我的项目，因为我们使用import syntax＆commonjs，它报告编译问题，其中tsc和gulp-typescript没有（相同的错误，无论是否通过使用gulp或通过CLI）。 我也试过minifyify，但它没有解决问题。

 var gulp = require('gulp'), ts = require('gulp-typescript'), browserify = require('browserify'), browserifyInc = require('browserify-incremental'), source = require('vinyl-source-stream'), del = require('del'), sourcemaps = require('gulp-sourcemaps'), buffer = require('vinyl-buffer'), xtend = require('xtend'); var tsProject = ts.createProject('tsconfig.json'); //COMPILE TS gulp.task('compileTs', function () { var sourceTsFiles = [config.src.tsFiles, config.src.tsTypes]; var tsResult = gulp.src(sourceTsFiles) .pipe(sourcemaps.init()) .pipe(ts(tsProject)); return tsResult.js .pipe(sourcemaps.write('.', { //includeContent: false, //sourceRoot: "../../src/js/" })) .pipe(gulp.dest(config.tempDir)); }); //BUNDLE BUILT TS->JS gulp.task('bundleJs', [], function () { var b = browserify(xtend(browserifyInc.args, { entries: config.tempDir + '/main.js', extensions: ['.js', '.jsx'], debug: true })); browserifyInc(b, {cacheFile: config.tempDir + '/browserify-cache.json'}); return b.bundle() .pipe(source('main.js')) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(config.dest.jsDir)); }); 

Answer 1

简短的回答

在compileTs任务中，您需要将源图写入输出.js文件，而不是专用的.map文件。 您还需要将includeContent设置为true，并指定正确的sourceRoot 。

然后在bundleJs任务中，使用bundleJs debug true就足以生成源映射。

更多细节

某些程序包未向bundle任务中的sourcemaps实用程序提供必要的源数据。 幸运的是，源图可以重新读取.ts文件。 要使恢复步骤正常工作，它需要正确的文件路径，这就是TypeScript编译任务中正确的sourceRoot如此重要的原因。

这里似乎还有其他陷阱。 例如，如果您将Sourcemaps写入TypeScript编译任务中的专用.map文件，则稍后bundle任务将生成指向已编译的.js文件的源图。 因此，编译任务将源图嵌入到实际的.js文件中也是至关重要的。

如果browserify的debug标志为true，则它将生成源映射。 这里额外gulp-sourcemaps分层有一个错误的交互，应该删除。

现实生活中的一个实例

目录结构

proj
    /ts
        /def
            my-declarations.d.ts
        /src
            my-sources.ts
        /tmp
            temp-files-get-created-here-by-gulp.js
        tsconfig.json
    /web
        /static
            /js
                final-result-goes-here.js
    gulpfile.js
    package.json

tsconfig.json

{
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true,
        "declaration": false,
        "jsx": "React",
        "target": "ES5",
        "module": "CommonJS"
    },
    "exclude": [
        "tmp"
    ]
}

的package.json

{
  "name": "my-awesome-project",
  "version": "0.1.0",
  "devDependencies": {
    "browserify": "^13.0.1",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.13.6",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

gulpfile.js

var path = require('path');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

var debug = false;

var paths = {
    tsConfig: 'ts/tsconfig.json',
    scriptsSrc: ['ts/def/**/*.ts', 'ts/src/**/*.ts', 'ts/src/**/*.tsx'],
    scriptsDst: 'web/static/js',
    outDev: 'bundle.dev.js',
    outFinal: 'bundle.js',
    tempDst: 'ts/tmp',
    entry: 'ts/tmp/entry.js'
};

var tsProject = ts.createProject(paths.tsConfig, { noExternalResolve: true });

gulp.task('ts', function () {
    var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(ts(tsProject));
    return tsResult.js.pipe(sourcemaps.write('', { debug: debug, includeContent: true, sourceRoot: './ts/src' })).pipe(gulp.dest(paths.tempDst));
});

gulp.task('dev', ['ts'], function() {
    var bsfy = browserify({ entries: paths.entry, debug: true }); // Debug true generates sourcemaps
    return bsfy.bundle()
        .on('error', gutil.log)
        .pipe(source(path.join(paths.scriptsDst, paths.outDev)))
        .pipe(buffer())
        .pipe(gulp.dest('./'));
});

gulp.task('final', ['ts'], function() {
    process.env.NODE_ENV = 'production';
    var bsfy = browserify({ entries: paths.entry, debug: false });
    return bsfy.bundle()
        .on('error', gutil.log)
        .pipe(source(path.join(paths.scriptsDst, paths.outFinal)))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./'));
});

// Rerun the dev task when a file changes
gulp.task('watch', function() {
    gulp.watch(paths.scriptsSrc, ['dev']);
});

// By default run all the tasks
gulp.task('default', ['dev', 'final']);

Answer 2

如果同时使用这两个任务，则第二个任务将编写新的源映射。 我建议你在compileTs任务中只编写一次源映射。

我认为这是你任务中唯一的问题。