使用Gulp with Babel错误导入

我想用babel来编译我已经用一个简单的文件（routes / users.js）尝试的ES6代码，如下所示

import express from 'express'; var router = express.Router(); /* GET users listing. */ router.get('/', (req, res, next) => { res.send('respond with a resource'); }); export default router; 

我已经添加到吞咽文件以下

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

我已经将任务添加到默认

 gulp.task('default', ['esconverter' ,'nodemon'], () => { console.log("Done"); }); 

当我运行它（gulp.js）时，我得到了以下错误

 /Users/i0/Webs/blog10/bl/routes/users.js:1 (function (exports, require, module, __filename, __dirname) { import express from 'express'; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) 

我在创build生成文件的dist / users.js文件夹中看到

 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _express = require('express'); var _express2 = _interopRequireDefault(_express); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var router = _express2.default.Router(); /* GET users listing. */ router.get('/', function (req, res, next) { res.send('respond with a resource'); }); exports.default = router; 

我怎样才能克服这个问题？

更新

这是我的项目结构：在bin / www express中项目的起始点在app.js中

另外我改变了我的吞噬文件，这仍然是相同的错误:(

 var gulp = require('gulp'); var browserSync = require('browser-sync'); var nodemon = require('gulp-nodemon'); const babel = require('gulp-babel'); gulp.task('browser-sync', ['nodemon'], () => { browserSync.init(null, { proxy: { target: "http://localhost:4000", ws: true }, files: ["public/**/*.*"], }); }); gulp.task('esconverter', () => { return gulp.src(['bin/www', 'routes/users.js', 'routes/index.js']) .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); }); gulp.task('nodemon', cb => { let started = false; return nodemon({ script: 'dist/www' //script: 'bin/www' }).on('start', () => { // to avoid nodemon being started multiple times if (!started) { cb(); started = true; } }); }); gulp.task('default', ['nodemon','esconverter' ], () => { console.log("Done"); }); 

更新2

我也尝试下面的代码

 gulp.task('esconverter', () => { return gulp.src(['./**/*.js', '!./node_modules{,/**}', './gulpfile.js', 'bin/www','!./dist']) .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); }); 

其中创build以下dist文件夹，上面仍然是相同的错误

Answer 1

您必须在整个代码库中运行babel，并确保您正在编译的主文件上运行节点。

如果你有一个index.js文件，你应该改变你的任务是这样的：

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

你应该运行node dist/index.js 。

---

根据源代码更新更新：

如果你把所有的源文件移动到一个src文件夹中，你可以像这样完成你的任务：

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

在你的nodemon中你指向： 'dist/bin/www' 。

这里的重要部分是保持dist文件夹中的文件结构在源代码中，否则requirepath将失败。