Búsqueda de sitios web

javascript - Mapas de origen de Gulp con TypeScript y Babel

Actualmente estoy escribiendo un proyecto paralelo donde puedo aprender más sobre TypeScript y ES6 (usando Babel).

Quería usar ES6 con mi TypeScript, así que me decidí por el siguiente flujo de trabajo.

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

Ahora estoy usando Gulp para automatizar todo esto, y me está resultando difícil lograr que los sourcemaps se generen correctamente. Debo mencionar que este estilo me fue sugerido por un usuario en /r/typescript, así que ni siquiera estoy seguro de si es posible.

De todos modos, aquí está mi tarea actual de gulp

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

He probado muchos enfoques diferentes, pero ninguno funciona. Al depurar en VSCode, el punto de entrada de mi aplicación: build/server/index.js se carga y encuentra correctamente el archivo fuente src/server/index.ts.

Sin embargo, cuando VSCode intenta entrar en otro archivo, por ejemplo build/server/utils/logger/index.js, busca src/server/utils/logger/index.js que no encuentra porque debería estar buscando un archivo *.ts.

¿Entonces, qué estoy haciendo mal? ¿O siquiera es posible? He estado mirando esto durante unas 5 horas. Así que cualquier consejo sería genial.

Además, VSCode 0.9.x muestra el '.../.js' archivo no encontrado y VSCode 1.0 simplemente falla silenciosamente.

mi tsconfig.json, se pasa mediante $.typescript.createProject()

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

.babelrc

{
  "presets": ["es2015"]
}

Aquí están los paquetes npm relevantes

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

Editar: He investigado un poco sobre gulp-sourcemaps, y cuando no se usa babel, los sourcemaps funcionan correctamente. (Se eliminó toda la información irrelevante)

src/server/up/up2/four.ts - Sin 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"
  }
}

Observa cómo en sourceMap.sources se lista el archivo fuente correcto up/up2/four.ts

Ahora aquí hay un ejemplo cuando agrego gulp-babel en la tarea.

src/server/up/up2/four.ts - Con 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": {
    "...": "..."
  }
}

Observa cómo el sourceMap.sources ahora muestra incorrectamente el four.js en lugar del archivo de TypeScript.

Curiosamente, mientras los archivos de TypeScript estén en el directorio raíz src/server, construyen los mapas de origen perfectamente.

src/server/two.ts - Con 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": {
    "...": "..."
  }
}

Respuesta #1

Actualizar

Parece que el problema específico en esta pregunta está relacionado con la generación incorrecta de mapas de origen por parte de Babel para archivos que no están en el directorio de trabajo. Ya hay un problema registrado aquí.

Para un objeto File de vinilo como

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

el mapa de origen generado debería tener algo como

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

pero gulp-babel da

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

Esto hace que los mapas de origen de Typescript y los mapas de origen de Babel se fusionen incorrectamente, pero solo cuando el archivo está más profundo que el directorio de trabajo.

Mientras se resuelve este problema, recomiendo apuntar a ES5 con Typescript y omitir Babel por completo. Esto produce mapas de origen correctos.

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

Respuesta anterior

Estás cerca, pero noté un par de errores en tu configuración:

  1. "module": "commonjs" es incompatible con "target": "es6". Produce módulos ES6 con Typescript y deja que Babel los transpile a CommonJS.
  2. "outDir" no es necesario al usar Gulp, ya que estás trabajando con un flujo. Los resultados intermedios (es decir, los resultados de Typescript) no se escriben en el disco en absoluto.
  3. "sourceMap": true no es necesario junto con Gulp sourcemaps.

He creado un proyecto que se compiló para mí, con [email y [email .

Estructura del directorio

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

uno.ts

export class One {};

dos.ts

import { One } from './one';

export class Two extends One {}

gulpfile.js

He integrado todas las configuraciones para mayor brevedad, pero deberías poder usar archivos de configuración con la misma facilidad.

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

Artículos relacionados