Gulp Typescript + Browserify；捆绑的 sourcemap 指向转译的 JS 而不是源 TS

2024-03-14

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

这就好像 browserify 忽略了指向 TS 代码的现有源映射，并创建了自己的新映射来转译 JS 代码。

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

Thanks!

Note:通过其他问题我已经尝试过使用tsify，根据我的理解，它不适用于我的项目，因为我们使用导入语法和 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));
});

简短回答

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

然后在bundleJs任务，有 browserifydebugtrue 足以生成源映射。

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

目录结构

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"
    ]
}

包.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']);

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)