Gulp source codes with TypeScript and Babel

Question

I am currently writing a side project where I can learn more about TypeScript and ES6 (using babel).

I wanted to use ES6 with my TypeScript, so I settled on the next workflow.

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

Now I'm using Gulp to automate all of this, and it's hard for me to get the source maps to generate properly. I should mention that this style was suggested to me by the user in / r / typescript, so I'm not even sure if this is possible.

Anyway, here is my current Gulp task

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

I tried many different approaches, but no one works. When debugging in VSCode, the entry point of my application: build/server/index.js loads and correctly finds the source file src/server/index.ts .

However, when VSCode tries to move to another file, say build/server/utils/logger/index.js , it looks for src/server/utils/logger/index.js , which it does not find, because it should look for * .ts file.

So what am I doing wrong? Or is it even possible? I watched it for about 5 hours. Therefore, any understanding would be wonderful.

Also VSCode 0.9.x displays '.../.js' file not found , and VSCode 1.0 just fails.

my tsconfig.json, it goes through $.typescript.createProject()

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

.babelrc

 { "presets": ["es2015"] } 

Here are the relevant npm packages

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

Edit: I did some research on gulp -sourcemaps, and when you are not using babel, sourcemaps files work correctly. (Removed all irrelevant information)

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

Note that in sourceMap.sources it lists the correct source file up/up2/four.ts

Now here is an example when I add gulp-babel to a task.

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

Note that sourceMap.sources now incorrectly displays four.js instead of the TypeScript file.

Curiously, as long as the TypeScript files are in the root directory of src/server , they correctly build the source maps.

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

Answer 1

Update

It seems that the specific problem in this issue is related to the incorrect generation of the Babel source code for files that are not in the working directory. There is already a problem here .

For a vinyl file object such as

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

the generated source map should have something like

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

but gulp-babel gives

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

This causes the Typescript source maps and Babel source maps to be incorrectly combined, but only when the file is deeper than the working directory.

While this problem is being solved, I recommend setting up ES5 using Typescript and completely bypassing Babel. This gives the correct source maps.

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

---

Previous answer

You are close, but there are a few errors that I noticed in your configuration:

• "module": "commonjs" incompatible with "target": "es6" . Derive ES6 modules using Typescript and let Babel translate them into CommonJS.
• "outDir" not required when using Gulp, since you are working with a stream. Intermediate results (i.e. Typescript results) are not written to disk at all.
• "sourceMap": true not required with Gulp sourcemaps .

I created a project that was compiled for me, with babel@6.1.18 and typescript @ 1.6.2.

Directory structure

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

one.ts

 export class One {}; 

two.ts

 import { One } from './one'; export class Two extends One {} 

gulpfile.js

I have included all the configurations for patience, but you can also easily use the configuration files.

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