无法使用 gulp 和 babel 转译 JavaScript 文件答案

【问题标题】：Failed to use gulp and babel transpile JavaScript file无法使用 gulp 和 babel 转译 JavaScript 文件
【发布时间】：2015-11-24 10:34:09
【问题描述】：

[问题]
无法使用 gulp 和 babel 转译 JavaScript 文件，错误详情如下：

$ 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)

[源文件文件夹结构]

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

[文件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": {}
}

[文件 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']);

[环境]
操作系统：OSX 10.11.1 安装的nodejs版本是5.1.0（npm版本是3.5.0）安装的打字稿版本是 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

【问题讨论】：

标签： gulp babeljs

【解决方案1】：

我在尝试使用 react 预设时遇到了类似的问题，但这对我有用：需要在 gulpfile 中使用预设，然后使用该预设变量而不是预设的字符串名称，如下所示：

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

我不知道这是否是最好的方法，但至少对我有用。

【讨论】：