React + Gulp + Babelify

Question

Я пытаюсь преобразовать свое рабочее приложение из React and Gulp с ES5 в React + Gulp и ES6.

Я только пытался заменить reactify с babelify, но я все еще получаю ошибку глотка: Illegal импорта декларация

Вот мой gulpfile.js:

"use strict"; 

    var gulp = require('gulp'); 
    var connect = require('gulp-connect'); //Runs a local dev server 
    var open = require('gulp-open'); //Open a URL in a web browser 
    var browserify = require('browserify'); // Bundles JS 
    var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp 
    var concat = require('gulp-concat'); //Concatenates files 
    var lint = require('gulp-eslint'); //Lint JS files, including JSX 
    var babelify = require("babelify"); 

    var config = { 
     port: 9005, 
     devBaseUrl: 'http://localhost', 
     paths: { 
      html: './src/*.html', 
      js: './src/**/*.js', 
      css: [ 
       'node_modules/bootstrap/dist/css/bootstrap.min.css', 
       'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 
       'node_modules/toastr/toastr.css' 
      ], 
      dist: './dist', 
      mainJs: './src/main.js' 
     } 
    } 

    //Start a local development server 
    gulp.task('connect', function() { 
     connect.server({ 
      root: ['dist'], 
      port: config.port, 
      base: config.devBaseUrl, 
      livereload: true 
     }); 
    }); 

    gulp.task('open', ['connect'], function() { 
     gulp.src('dist/index.html') 
      .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'})); 
    }); 

    gulp.task('html', function() { 
     gulp.src(config.paths.html) 
      .pipe(gulp.dest(config.paths.dist)) 
      .pipe(connect.reload()); 
    }); 

    gulp.task('js', function() { 
     browserify(config.paths.mainJs) 
      .transform(babelify) 
      .bundle() 
      .on('error', console.error.bind(console)) 
      .pipe(source('bundle.js')) 
      .pipe(gulp.dest(config.paths.dist + '/scripts')) 
      .pipe(connect.reload()); 
    }); 

    gulp.task('css', function() { 
     gulp.src(config.paths.css) 
      .pipe(concat('bundle.css')) 
      .pipe(gulp.dest(config.paths.dist + '/css')); 
    }); 

    gulp.task('lint', function() { 
     return gulp.src(config.paths.js) 
      .pipe(lint({config: 'eslint.config.json'})) 
      .pipe(lint.format()); 
    }); 

    gulp.task('watch', function() { 
     gulp.watch(config.paths.html, ['html']); 
     gulp.watch(config.paths.js, ['js', 'lint']); 
    }); 

    gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']); 

и это мой JS файл (основное. JS):

"use strict"; 

var React = require('react'); 
var Router = require('react-router'); 
var routes = require('./routes'); 
import React from 'react'; 

Router.run(routes, function(Handler) { 
    React.render(<Handler/>, document.getElementById('app')); 
}); 

спасибо

Answer 1

Вам необходимо установить столпотворение предварительно npm i babel-preset-es2015 --save-dev

и добавить в конфигурации .babelrc как этот

{ 
    "presets": [ 
    "es2015" 
    ] 
} 

Или лучше использовать gulp-babel

$ npm install --save-dev gulp-babel babel-preset-es2015

const gulp = require('gulp'); 
const babel = require('gulp-babel'); 

gulp.task('default',() => { 
    return gulp.src('src/app.js') 
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

https://www.npmjs.com/package/gulp-babel