3

I have the following gulp task (including all of my requires, as requested):

const gulp = require("gulp");
const browserify = require("browserify");
const tsify = require("tsify");
const sass = require('gulp-sass');
const fs = require('fs');
const uglify = require('gulp-uglify');
const tslint = require('gulp-tslint');
const gutil = require('gulp-util');
const babelify = require("babelify");

gulp.task('js', function () {
    return browserify({
        entries: paths.ts + 'App/start.ts',
        debug: true
    }).plugin("tsify")
        .transform(babelify.configure({
            presets: ["es2015"]
        }))
        .bundle()
        .on('error', swallowError)
        .pipe(fs.createWriteStream(jsOutput + "app.js"));
});

with all the of the required modules included in package.json, including babel-preset-es2015. However, the babelify transform isn't doing anything at all, to the extent that I can change "es2015" to be anything and I get the exact same result (es6 output).

I've tried including a .babelrc file with the preset specified, to no effect, as well as several different ways of specifying the babelify transform, including adding in .ts file extensions.

My tsconfig.json has the following:

"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
}

which specifies the output type as ES6.

No errors are thrown during this process, and the typescript is fully transpiled, I'm just left with ES6 code.

5
  • Have you required gulp, browserify, babelify in your gulp file?
    – dafyddPrys
    Jun 15, 2016 at 14:44
  • I've updated the question with my requires.
    – CoreyGrant
    Jun 15, 2016 at 14:51
  • This link shows an example of someone using babelify in a gulp task, it looks somewhat different to yours : gist.github.com/danharper/3ca2273125f500429945
    – dafyddPrys
    Jun 15, 2016 at 14:58
  • I'm first doing a transpilation from typescript to javascript, so I'm using tsify and their suggested way is as I have done: npmjs.com/package/tsify#es2015-formerly-known-as-es6 I've tried specifying the file extensions as they have done, to no avail.
    – CoreyGrant
    Jun 15, 2016 at 15:08
  • It seems tsify produces ES5 codes by default. Maybe you should specify {target: 'es6'} as tsify option?
    – hakatashi
    Jun 16, 2016 at 3:29

1 Answer 1

7

You have to tell Babelify about the file extensions to consider, which is .ts for TypeScript in this case:

// ...
.transform(babelify, {
    presets: ['es2015'],
    extensions: ['.js', '.ts'] // <-- I have added .js and .ts
})
// ...
2
  • 1
    This has worked, thank you. I was assuming that the tsify plugin would remove the need to specify the .ts extension, but that was obviously a bad assumption.
    – CoreyGrant
    Jul 11, 2016 at 8:55
  • This means that the gulp Typescript tutorial -in the official page- is wrong because it is measing that property (extensions): typescriptlang.org/docs/handbook/gulp.html Aug 31, 2016 at 23:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.