Question

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

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文件中添加了以下内容

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)

我在创建生成文件的 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中

此外我将我的gulp文件更改为此仍然是同样的错误:(

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'));
});

创建以下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'。

这里的重要部分是，在源文件夹中保留相同的文件结构，否则需要路径将失败。

使用Gulp with Babel错误导入

1 个答案: