reactjs - ReferenceError: [BABEL] Unknown option.babelrc.presets while parsing file -
i using babel 6 es2015 , react have added presets property in .babelrc while running gulp in project getting following error.
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 @ logger.error (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\logger.js:58:11) @ optionmanager.mergeoptions (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29) @ optionmanager.addconfig (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10) @ optionmanager.findconfigs (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35) @ optionmanager.init (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12) @ file.initoptions (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:147:75) @ new file (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\file\index.js:137:22) @ pipeline.transform (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\node_modules\babel-core\lib\transformation\pipeline.js:164:16) @ babelify._flush (c:\sunny\ubuntushare\projects\viewpoint_ui\node_modules\babelify\index.js:28:24) @ babelify.<anonymous> (_stream_transform.js:118:12)
my .babelrc file is
{ "presets": ["react","stage-0","es2015"] }
if run babel src -d lib command, works. if run gulp build building error appears.
the gulpfile follows
'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 , dependencies' package ids var packagemanifest = {}; try { packagemanifest = require('./package.json'); } catch (e) { // not have 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 lint output eslint property // of file object can used other modules. .pipe(eslint()) // eslint.format() outputs lint results console. // alternatively use eslint.formateach() (see docs). .pipe(eslint.format()) // have process exit error code (1) on // lint error, return stream , pipe 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 }); // similar thing, 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 content , use basename of // filepath in scope basename. var f = file(name, content, { src: true }); // uglify content if (production) { f = f.pipe(uglify()); } // write content 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 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']);
Comments
Post a Comment