CODEWITHSUNDEEP
javascriptnode.jsgulpecmascript-6babeljs
Jenny Hilton
Jenny Hilton

Reputation: 1407

Using Gulp with Babel error for import

I want to use babel to compile ES6 code I have tried with one simple file (routes/users.js) like following

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;

I've added to the gulp file the following 

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

I've added the task to default 

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

when I run it (gulp.js) I got the following error 

/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)

I see in the dist/users.js folder that created the file that was generated 

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

How can I overcome this issue?

update

This is my project structure: The starter point of the project in bin/www express is in app.js in the root

enter image description here

in addition I changed my gulp file to this and still the same error :( 

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

update 2

I try also with the following code 

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

which create the following dist folder and still the same error above

enter image description here

Upvotes: 1

Views: 2357

Answers (1)

Canastro
Canastro

Reputation: 3009

You have to run babel in your entire codebase and make sure you're running node on the compiled main file.

If you have a index.js file, you should change your task to something like this:

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

And you should run node dist/index.js.

Update based on source code update:

If you move all your source files into a src folder, you can have your task like this:

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

And in your nodemon you point to: 'dist/bin/www'.

The important part here is, to keep the same file structure inside the dist folder has you have in your source, otherwise the require paths will fail.

Upvotes: 1

Related Questions