Failed to use gulp and babel transpile JavaScript file

Question

[Question]
Failed to use gulp and babel transpile JavaScript file, error detail below:

$ gulp
[10:58:53] Requiring external module babel-core/register
[10:58:53] Using gulpfile /code/MyGitRepos/babel-test/gulpfile.babel.js
[10:58:53] Starting 'compile-ts'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: Couldn't find preset "es2015-node5" relative to directory "/code/MyGitRepos/js"
    at OptionManager.mergePresets (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:327:17)
    at OptionManager.mergeOptions (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:287:12)
    at OptionManager.init (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
    at File.initOptions (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/file/index.js:190:75)
    at new File (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/file/index.js:121:22)
    at Pipeline.transform (/code/MyGitRepos/babel-test/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at DestroyableTransform._transform (/code/MyGitRepos/babel-test/node_modules/gulp-babel/index.js:30:20)
    at DestroyableTransform.Transform._read (/code/MyGitRepos/babel-test/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/code/MyGitRepos/babel-test/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/code/MyGitRepos/babel-test/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:333:12)

[Source Files Folder Structure]

/code/MyGitRepos/babel-test/
                            package.json
                            gulpfile.babel.js
                            script/
                                   ts/
                                      Foo.ts
                                      tsconfig.json
                                   js/

[Content of file package.json]

{
  "name": "babel-test",
  "main": "app.js",
  "version": "1.0.0",
  "devDependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-es2015-node5": "^1.1.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1.0",
    "gulp-typescript": "^2.9.2"
  },
  "optionalDependencies": {},
  "dependencies": {}
}

[Content of file gulpfile.babel.js]

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

var tsModules = ts.createProject('./script/ts/tsconfig.json');

gulp.task('compile-ts', function() {
    return gulp.src('./script/ts/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsModules))
        .pipe(babel({"presets": ["es2015-node5"]})) //"es2015" not works too
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./script/js'));
});

gulp.task('es5', ['compile-ts']);

gulp.task('default', ['es5']);

[Environment]
OS: OSX 10.11.1 installed nodejs version is 5.1.0 (npm version is 3.5.0) installed typescript version is 1.6.2

use npm install gulp and babel globally
    sudo npm install gulp babel  -g

gulp --version
    CLI version 3.9.0

babel --version
    6.2.0 (babel-core 6.2.0)


use npm install the packages below as project dependency.
    npm install gulp gulp-babel gulp-typescript babel-preset-es2015-node5 babel-preset-es2015 --save-dev

Answer 1

I was having a similar problem with trying to use the react preset, but this worked for me: require the preset inside your gulpfile, and then use that preset variable rather than the string name of the preset, like so:

var gulp = require('gulp'),
babel = require('gulp-babel'),
ts = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps'),
es2015Preset = require('babel-preset-es2015-node5'); // require the preset here

var tsModules = ts.createProject('./script/ts/tsconfig.json'    );

gulp.task('compile-ts', function() {
    return gulp.src('./script/ts/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsModules))
        .pipe(babel({"presets": [es2015Preset]})) // use the preset here
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./script/js'));
});

gulp.task('es5', ['compile-ts']);

gulp.task('default', ['es5']);

I don't know whether this is the best way to do it, but it worked for me at least.