ivogabe / gulp-typescript

A TypeScript compiler for gulp with incremental compilation support.
MIT License
839 stars 129 forks source link

Sourcemap generation issues (tsproject broken?) #644

Open MagicLegend opened 4 years ago

MagicLegend commented 4 years ago

Expected behavior: Correct sourcemaps

Actual behavior: Different maps if manually invoked or from gulp.

I already posted this issue https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/377 here, where the author said that it was an issue with tsProject. Because it is based on the examples provided by gulp-typescript, I wanted to repost the issue here.

The issue I'm having is that manually invoking the transpiler results in different sourcemaps than using gulp.

Files:

tsconfig.base.json

{
    "compileOnSave": false,
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "sourceMap": true,
      "pretty": true,
      "strictNullChecks": true,
      "skipLibCheck": true,
      "strictPropertyInitialization": true,
      "outDir": ".nowhere", // Bogus value; this config should not be used to transpile.
      // "rootDir": "src",
      "allowJs": true
    }
}

tsconfig.json

{
  // https://stackoverflow.com/a/37555279/7193940
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "allowJs": true,
    "outDir": "bin"
  },
  "include": [
    "src",
    "test",
    "gulpfile.js"
  ],
  "exclude": [
    "node_modules",
    "bin"
  ]
}

tsconfig.dev.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "allowJs": true,
    "isolatedModules": true,
    "outDir": "bin",
    "sourceMap": true,
    // "baseUrl": "./"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "bin",
    "gulpfile.js"
  ]
}

Gulpfile.js

const gulp = require('gulp');
const tsc = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const eslint = require('gulp-eslint');
const logger = require('gulplog');
const notify = require('gulp-notify');
const nodemon = require('gulp-nodemon');
const mocha = require('gulp-mocha');

const tsProject = tsc.createProject('tsconfig.dev.json');

const config = {
    source: './',
    get sourceApp() { return `${this.source}src/`; },
    get tsOutputPath() { return `${this.source}bin/`; },
    get tsTestOutputPath() { return `${this.source}bin/`; },
    get allJavaScript() { return `${this.source}bin/**/*.js`; },
    get allTypeScript() { return `${this.sourceApp}**/*.ts`; },
};

/**
 * Transpile all TypeScript in the project and store the output + sourcemaps in the config.tsOutputPath folder.
 */
gulp.task('transpile-ts', () => tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject())
    .pipe(sourcemaps.write('.', { sourceRoot: '.', includeContent: false }))
    .pipe(gulp.dest(config.tsOutputPath)));

gulp.task('mocha', () => {
    return gulp.src(['test/**/*.test.ts']).pipe(mocha({ require: 'ts-node/register', reporter: 'nyan' }));
});

/**
 * Utilize nodemon to run the node server.
 */
gulp.task('start-node', () => nodemon({
    // the script to run the app
    script: `${config.tsOutputPath}index.js`,
    // this listens to changes in any of these files/routes and restarts the application
    watch: [config.sourceApp],
    tasks: ['transpile'],
    ext: 'ts,js',
    env: {
        NODE_ENV: 'development',
    },
})
    // .on('start', ['transpile'])
    // .on('change', ['watch-no-lint'])
    .on('restart', () => {
        if (config.DEBUG) {
            gulp.src()
                .pipe(notify('Restarting node server...'));
        }
    }).on('crash', () => {
        gulp.src()
            .pipe(notify('Nodemon has crashed!'));
    }));

gulp.task('transpile', gulp.series('clean-ts', 'transpile-ts'));

When using the gulp transpile command:

Source location: src/index.ts Transpiled location: bin/index.js Mapping file location: bin/index.js.map

{"version":3,"sources":["index.ts"],"names":[],"mappings":";;AAAA,wBAAsB","file":"index.js","sourceRoot":"."}

When using tsc --p tsconfig.dev.json command:

Source location: src/index.ts Transpiled location: bin/index.js Mapping file location: bin/index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,wBAAsB"}

As you can see, the sources of the gulp-transpile command are plain wrong, but the ones generated by tsc aren't. I'm at a total loss of what I'm doing wrong, and any pointers would be greatly appreciated. The complete project that I'm using for testing can be found here: https://github.com/MagicLegend/ts-testing-project

In the actual project I am also having issues with that all the source files are located in server/src, which confuses the source map generation even more (it adds a server/ to the sources path...)

Any help is much appreciated!