javascriptgulpecmascript-6babeljsgrunt-babel

Why i cannot transpile my js file?


I have a ES6 project. I want to transpile file into ES5. I'have created a gulp task. Here is the my task using babel :

gulp.task('transpile' , function() {
  console.log('Transpile js ');
    return gulp.src(['app/**/*.js'])
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(ngAnnotate())
    .pipe(uglify().on('error', function(e){
        console.log(e);
        }))
    .pipe(gulp.dest('target/'));
});

When i run my task, i have an error :

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/me/myapp/target/tmp/src/content.components/login/login.controller.js: Unexpected token (20:16)
  18 |     }
  19 | 
> 20 |     successAuth = (result) => {
     |                 ^
  21 |         this.$rootScope.$broadcast('authenticationSuccess');
  22 |         this.$location.path('/');
  23 |     };
    at Parser.pp.raise (/Users/me/node_modules/babylon/lib/parser/location.js:22:13)

The problem occurs in my controller :

class LoginController {

    constructor($rootScope, $location, AuthService) {
        this.AuthService = AuthService;
        this.$rootScope = $rootScope;
        this.$location = $location;
    }

    login() {
        this.loading = true;
        this.AuthService.login({
            username: this.username,
            password: this.password,
            rememberMe: this.rememberMe
        }).then(this.successAuth, this.failedAuth);
    }

    successAuth = (result) => {
        this.$rootScope.$broadcast('authenticationSuccess');
        this.$location.path('/');
    };
    failedAuth = (error) => {
        this.error = 'Identifiant ou mot de passe incorrect';
        this.loading = false;
    };
}

LoginController.$inject = ['$rootScope', '$location', 'AuthService']

export default LoginController;

How to resolve my error please ?


Solution

  • The syntax for class methods is methodName(parameters) { body }.

    Write your class like this:

    class LoginController {
    
        constructor($rootScope, $location, AuthService) {
            this.AuthService = AuthService;
            this.$rootScope = $rootScope;
            this.$location = $location;
        }
    
        login() {
            this.loading = true;
            this.AuthService.login({
                username: this.username,
                password: this.password,
                rememberMe: this.rememberMe
            }).then(this.successAuth, this.failedAuth);
        }
    
        successAuth(result) {
            this.$rootScope.$broadcast('authenticationSuccess');
            this.$location.path('/');
        }
    
        failedAuth(error) {
            this.error = 'Identifiant ou mot de passe incorrect';
            this.loading = false;
        }
    
    }