Question

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

java.lang.NoSuchMethodError: com.google.common.util.concurrent.MoreExecutors.directExecutor()Ljava/util/concu‌rrent/Executor;

[源文件夹结构]

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

[文件package.json的内容]

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

[文件gulpfile.babel.js的内容]

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

[环境]
操作系统：OSX 10.11.1 安装的nodejs版本是5.1.0（npm版本是3.5.0）安装的打字稿版本是1.6.2

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

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

我不知道这是否是最佳方式，但它至少对我有用。

无法使用gulp和babel转换JavaScript文件

1 个答案: