React + Gulp + Babelify
我正尝试将我的工作应用程序从React和Gulp与ES5转换为React + Gulp和ES6。
我只是试图用babelifyreplace反应，但我仍然得到吞咽错误：非法import声明
这是我的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文件（main.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')); });
非常感谢
你需要安装babel预设npm i babel-preset-es2015 --save-dev
并像这样将configuration添加到.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')); });