ReferenceError：解析文件时[BABEL]未知option.babelrc.presets

Question

我正在使用Babel 6 for es2015并且反应我在.babelrc中添加了presets属性但是在我的项目中运行gulp时出现以下错误。

ReferenceError: [BABEL] C:\sunny\ubuntushare\projects\viewpoint_ui\src\javascript\app-nyi.jsx: Unknown option: C:\sunny\ubuntushare\projects\viewpoint_ui\.babelrc.presets while parsing file: C:\sunny\ubuntushare\projects\viewpoint_ui\src\javascript\app-nyi.jsx
at Logger.error (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at Babelify._flush (C:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\index.js:28:24)
at Babelify.<anonymous> (_stream_transform.js:118:12)

我的.babelrc文件是

{
  "presets": ["react","stage-0","es2015"]
}

如果我运行babel src -d lib命令，它可以工作。但是如果我运行gulp build来构建错误就会出现。

gulpfile如下

    'use strict';

var _ = require('lodash');
var gulp = require('gulp');
var webserver = require('gulp-webserver');
var browserify = require('browserify');
var babelify = require('babelify');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var sass = require('gulp-sass');
var swig = require('gulp-swig');
var rename = require("gulp-rename");
var nodeResolve = require('resolve');
var source = require('vinyl-source-stream');
var del = require('del');
var buffer = require('gulp-buffer');
var concat = require('concat-stream');
var file = require('gulp-file');
var eslint = require('gulp-eslint');
var concatCss = require('gulp-concat-css');

var production = (process.env.NODE_ENV === 'production');
function getNPMPackageIds() {
  // read package.json and get dependencies' package ids
  var packageManifest = {};
  try {
    packageManifest = require('./package.json');
  } catch (e) {
    // does not have a package.json manifest
  }
  return _.keys(packageManifest.dependencies) || [];
}

gulp.task('lint', function () {
  return gulp.src(['./src/javascript/components/**/*.jsx','./src/javascript/actions/*.jsx','./src/javascript/stores/*.jsx','./src/javascript/utilities/*.js'])
    // eslint() attaches the lint output to the eslint property
    // of the file object so it can be used by other modules.
    .pipe(eslint())
    // eslint.format() outputs the lint results to the console.
    // Alternatively use eslint.formatEach() (see Docs).
    .pipe(eslint.format())
    // To have the process exit with an error code (1) on
    // lint error, return the stream and pipe to failOnError last.
  //.pipe(eslint.failOnError());
});

gulp.task('templates', ['clean'], function () {
  gulp.src('./src/htdocs/**/*.html')
    .pipe(swig())
    .pipe(gulp.dest('./build/'));
});

gulp.task('server', function () {
  gulp.src('./build')
    .pipe(webserver({
      host: '0.0.0.0',
      port: 8080,
      // fallback: 'index.html',
      livereload: true,
      proxies: [{
        source: '/ui',
        target: 'http://localhost:8080/'
      }]
    }));
});

gulp.task('sass', ['clean'], function () {
  var css = gulp.src('./src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError));

  if (production) { css = css.pipe(minify()); }
  css.pipe(gulp.dest('./build/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

// main build task
gulp.task('build', ['build-vendor', 'build-app', 'uikit', 'sass', 'templates', 'copyfiles']);

gulp.task('build-vendor', function () {
  var b = browserify({
    // generate source maps in non-production environment
    debug: !production
  });

  // do the similar thing, but for npm-managed modules.
  // resolve path using 'resolve' module
  getNPMPackageIds().forEach(function (id) {
    b.require(nodeResolve.sync(id), { expose: id });
  });

  var stream = b.bundle().pipe(source('vendor.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./build'));

  if (production) {
    stream = stream.pipe(uglify())
    .pipe(gulp.dest('./build'));
  }
  return stream;
});

function write(name) {
    return concat(function (content) {
        // create new vinyl file from content and use the basename of the
        // filepath in scope as its basename.
        var f = file(name, content, { src: true });
        // uglify content
        if (production) {
          f = f.pipe(uglify());
        }
        // write content to build directory
        f.pipe(gulp.dest('./'));
        return f;
      });
  }

gulp.task('build-app', function () {
  var files = ['src/javascript/app.jsx', 'src/javascript/app-2f.jsx', 'src/javascript/app-nyi.jsx'];
  var b = browserify(files, {
    extensions: ['.jsx'],
    debug: !production
  });

  // exclude all NPM modules
  getNPMPackageIds().forEach(function (id) {
    b.external(id);
  });

  b.plugin('factor-bundle', {
    outputs: [
      write('build/app.js'),
      write('build/app-2f.js'),
      write('build/app-nyi.js')
    ]
  });
  var stream = b.transform(babelify, {presets: ["react","stage-0","es2015"]}).bundle()
    .pipe(source('common.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./build/'));

  if (production) {
    stream = stream.pipe(uglify())
    .pipe(gulp.dest('./build'));
  }
  return stream;
});

gulp.task('clean', function (cb) {
  del([
    'build/**/*.*'
  ], cb);
});

gulp.task('uikit', ['clean'], function () {
  gulp.src([(production ? './node_modules/': '../') + 'osstools_uikit/assets/css/screen.css', './node_modules/react-widgets/dist/css/react-widgets.css', './node_modules/rc-slider/assets/index.css', './node_modules/react-bootstrap-table/css/react-bootstrap-table-all.css'])
  .pipe(concatCss('osstools_uikit.css', {rebaseUrls:false}))
  .pipe(gulp.dest('./build/css'));
});

gulp.task('copyfiles', ['clean'], function () {
  gulp.src((production ? './node_modules/' : '../') + 'osstools_uikit/assets/images/**/*')
  .pipe(gulp.dest('./build/css/images/'));
  gulp.src(['./node_modules/react-widgets/dist/fonts/*', (production ? './node_modules/' : '../') + 'osstools_uikit/assets/fonts/**/*'])
  .pipe(gulp.dest('./build/fonts/'));
});

gulp.task('watch', ['build-vendor', 'build-app', 'uikit', 'sass', 'templates', 'copyfiles'], function () {
  gulp.watch('./src/javascript/components/**/*.jsx', ['build']);
  gulp.watch('./src/javascript/stores/*.jsx', ['build']);
  gulp.watch('./src/javascript/actions/*.jsx', ['build']);
  gulp.watch('./src/javascript/utilities/*.js', ['build']);
  gulp.watch('./src/sass/**/*.scss', ['sass']);
  gulp.watch('./src/htdocs/**/*.html', ['templates']);
});

gulp.task('default', ['build', 'server', 'watch']);