javascript - Gulp sourcemaps med TypeScript og Babel

Jeg skriver for øyeblikket på et sideprosjekt hvor jeg kan lære mer om TypeScript og ES6 (ved å bruke babel).

Jeg ønsket å bruke ES6 med min TypeScript, så jeg valgte følgende arbeidsflyt.

Typescript (ES6) -> Babel (ES6) -> ES5

Nå bruker jeg Gulp for å automatisere alt dette, og jeg har veldig vanskelig for å få sourcemaps til å genereres riktig. Jeg bør nevne at denne stilen ble foreslått av en bruker på /r/typescript, så jeg er ikke engang sikker på om det er mulig.

Uansett, her er min nåværende gulp-oppgave

var server = $.typescript.createProject('src/server/tsconfig.json');
gulp.task('build', ['vet'], function () {
  var sourceRoot = path.join(__dirname, 'src/server/**/*.ts');
  return gulp.src('src/server/**/*.ts')
    .pipe($.sourcemaps.init())
      .pipe($.typescript(server))
      .pipe($.babel())
    .pipe($.sourcemaps.write('.', { sourceRoot: sourceRoot}))
    .pipe(gulp.dest('build/server'));
});

Jeg har prøvd mange forskjellige tilnærminger, men ingen fungerer. Når jeg feilsøker i VSCode, laster inngangspunktet til appen min: build/server/index.js og finner kildefilen src/server/index.ts riktig.

Men når VSCode forsøker å stege inn i en annen fil, for eksempel build/server/utils/logger/index.js, søker den etter src/server/utils/logger/index.js, som den ikke finner fordi den egentlig burde lete etter en *.ts-fil.

Så hva gjør jeg galt? Eller er dette i det hele tatt mulig? Jeg har stirret på dette i omtrent 5 timer nå. Så all innsikt ville vært flott.

Også VSCode 0.9.x viser '.../.js' fil ikke funnet og VSCode 1.0 feiler bare stille.

min tsconfig.json, den blir sendt inn av $.typescript.createProject()

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "target": "ES6",
    "sourceMap": true,
    "outDir": "build/server"
  }
}

.babelrc

{
  "presets": ["es2015"]
}

Her er de relevante npm-pakkene

"devDependencies": {
    "babel-polyfill": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "gulp-babel": "^6.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.9.2"
}

Redigér: Jeg har undersøkt gulp-sourcemaps, og når man ikke bruker babel fungerer sourcemaps riktig. (Fjernet all irrelevant informasjon)

src/server/up/up2/four.ts - Ingen Babel

{
  "history": [ "/home/user/code/test/src/server/up/up2/four.js" ],
  "base": "/home/user/code/test/src/server/",
  "sourceMap": {
    "sources": ["up/up2/four.ts"],
    "file": "up/up2/four.js"
  }
}

Merk hvordan i sourceMap.sources det listes den riktige kildefilen up/up2/four.ts

Her er nå et eksempel når jeg legger til gulp-babel i oppgaven.

src/server/up/up2/four.ts - Med Babel

{
  "history": [ "/home/user/code/test/src/server/up/up2/four.js" ],
  "base": "/home/user/code/test/src/server/",
  "sourceMap": {
    "sources": ["four.js"],
    "file": "up/up2/four.js"
  },
  "babel": {
    "...": "..."
  }
}

Merk hvordan sourceMap.sources nå feilaktig viser four.js i stedet for TypeScript-filen.

Merkelig nok, så lenge TypeScript-filene er i rotkatalogen src/server, bygger de kildekartene helt fint.

src/server/two.ts - Med Babel

{
  "history": [ "/home/user/code/test/src/server/two.js" ],
  "base": "/home/user/code/test/src/server/",
  "sourceMap": {
    "sources": ["two.ts"],
    "file": "two.js"
  },
  "babel": {
    "...": "..."
  }
}

Svar #1

Oppdater

Det ser ut til at det spesifikke problemet i dette spørsmålet er relatert til Babels feilaktige generering av kildekart for filer som ikke er i arbeidskatalogen. Det er allerede registrert en sak her.

For et vinylfil-objekt som

new File({
  cwd: '.',
  base: './test/',
  path: './test/some/file.js'
  ...
});

den genererte kildekartet bør ha noe som

{
  ...
  "sources": ["some/file.js"]
  ...
}

men gulp-babel gir

{
  ...
  "sources": ["file.js"]
  ...
}

Dette gjør at Typescript-kartene og Babel-kartene blir feilaktig slått sammen, men bare når filen ligger dypere enn arbeidskatalogen.

Mens dette problemet blir løst, anbefaler jeg å sikte mot ES5 med Typescript og helt omgå Babel. Dette gir riktige kildekart.

gulp.task('build', function () {
  return gulp.src('src/server/**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(typescript({
      noImplicitAny: true,
      removeComments: true,
      preserveConstEnums: true,
      target: 'es5',
      module: 'commonjs'
    }))
    .pipe(sourcemaps.write('.', { sourceRoot: 'src/server' }))
    .pipe(gulp.dest('build/server'));
});

Forrige svar

Du er nær, men det er et par feil jeg la merke til i konfigurasjonen din:

  1. "module": "commonjs" er uforenlig med "target": "es6". Output ES6-moduler med Typescript og la Babel transpilere dem til CommonJS.
  2. "outDir" er ikke nødvendig når du bruker Gulp siden du jobber med en strøm. Mellomliggende resultater (dvs. resultater fra Typescript) skrives ikke til disk i det hele tatt.
  3. "sourceMap": true er ikke nødvendig sammen med Gulp sourcemaps.

Jeg har laget et prosjekt som ble kompilert for meg, med [email og [email .

Katalogstruktur

.
├── gulpfile.js
└── src
    └── server
        ├── one.ts
        └── two.ts

one.ts

export class One {};

to.ts

import { One } from './one';

export class Two extends One {}

gulpfile.js

Jeg har lagt inn alle konfigurasjoner direkte for korthet, men du bør kunne bruke konfigurasjonsfiler like enkelt.

var gulp = require('gulp');

var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');
var babel = require('gulp-babel');

gulp.task('build', function () {
  return gulp.src('src/server/**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(typescript({
      noImplicitAny: true,
      removeComments: true,
      preserveConstEnums: true,
      target: 'es6'
    }))
    .pipe(babel({
      presets: [ 'es2015' ]
    }))
    .pipe(sourcemaps.write('.', { sourceRoot: 'src/server' }))
    .pipe(gulp.dest('build/server'));
});

Relaterte artikler