简短回答

Question

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

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

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

谢谢！

注意：通过我已经尝试使用 tsify 的其他SO问题，根据我的理解，我们使用导入语法＆amp; commonjs，它报告tsc和gulp-typescript不存在的编译问题（无论是通过gulp还是通过CLI使用相同的错误）。我也试过minifyify，但它没有解决问题。

＆＃13;

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

＆＃13;

Answer 1

简短回答

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

然后在bundleJs任务中，使浏览器debug为true就足以生成源图。

现实生活中的一个工作实例

目录结构

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任务中编写一次源地图。

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

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

2 个答案:

简短回答

更多细节

现实生活中的一个工作实例

目录结构

tsconfig.json

的package.json

gulpfile.js