带有 const 的 ES6 语法错误

Question

我有这个问题运行 es6 与 babel 和 webpack:

Module build failed: SyntaxError: /Users/agarcia/Projects/app/services/router/router.js: Unexpected token (9:10)
>  9 |     const requestAuth = [
     |           ^
  10 |         '#profile'
  11 |     ];
  12 |

有人知道那里出了什么问题吗？我不确定我是否可以这样定义一个常量。

文件：

import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import Session from '../session/session';

class BaseRouter extends Marionette.AppRouter {

   // Routes that need authentication and if user is not authenticated
   // gets redirect to login page
   const requestAuth = [
       '#profile'
   ];

   // Routes that should not be accessible if user is authenticated
   // for example, login, register, forget-password ...
   const preventAccessWhenAuth = [
       '#login'
   ];

   before(params, next) {
       // Checking if user is authenticated or not
       // then check the path if the path requires authentication
       let isAuth, path, needAuth, cancelAccess;

       isAuth = Session.get('authenticated');
       path = Backbone.history.location.hash;
       needAuth = _.contains(this.requestAuth, path);
       cancelAccess = _.contains(this.preventAccessWhenAuth, path);

       if(needAuth && !isAuth) {
           // If user gets redirect to login because wanted to access
           // to a route that requires login, save the path in session
           // to redirect the user back to path after successful login
           Session.set('redirectFrom', path);
           Backbone.history.navigate('login', { trigger : true });
       } else if (isAuth && cancelAccess) {
           // User is authenticated and tries to go to login, register ...
           // so redirect the user to home page
           Backbone.history.navigate('', { trigger : true });
       } else {
           // No problem, handle the route!!
           return next();
       }
   }

   after() {}

   onRoute(route, name, callback) {
      if (!_.isRegExp(route)) route = this._routeToRegExp(route);
      if (_.isFunction(name)) {
          callback = name;
          name = '';
      }
      if (!callback) callback = this[name];

      var router = this;

      Backbone.history.route(route, function(fragment) {
          let args = router._extractParameters(route, fragment);

          let next = function() {
              callback && callback.apply(router, args);
              router.trigger.apply(router, ['route:' + name].concat(args));
              router.trigger('route', name, args);
              Backbone.history.trigger('route', router, name, args);
              router.after.apply(router, args);
          };

          router.before.apply(router, [args, next]);
      });

      return this;
   }
}

导出默认 BaseRouter；

Answer 1

我修复了简单地从 class:

中取出那些常量

import Backbone from 'backbone';
import Marionette from 'backbone.marionette';
import Session from '../session/session';

// Routes that need authentication and if user is not authenticated
// gets redirect to login page
const requestAuth = [
    '#profile
];

// Routes that should not be accessible if user is authenticated
// for example, login, register, forget-password ...
const preventAccessWhenAuth = [
     '#login'
];

class BaseRouter extends Marionette.AppRouter {

   before(params, next) {
       // Checking if user is authenticated or not
       // then check the path if the path requires authentication
       let isAuth, path, needAuth, cancelAccess;

       isAuth = Session.get('authenticated');
       path = Backbone.history.location.hash;
       needAuth = _.contains(requestAuth, path);
       cancelAccess = _.contains(preventAccessWhenAuth, path);

       if(needAuth && !isAuth) {
           // If user gets redirect to login because wanted to access
           // to a route that requires login, save the path in session
           // to redirect the user back to path after successful login
           Session.set('redirectFrom', path);
           Backbone.history.navigate('login', { trigger : true });
       } else if (isAuth && cancelAccess) {
           // User is authenticated and tries to go to login, register ...
           // so redirect the user to home page
           Backbone.history.navigate('', { trigger : true });
       } else {
           // No problem, handle the route!!
           return next();
       }
   }

   after() {}

   onRoute(route, name, callback) {
      if (!_.isRegExp(route)) route = this._routeToRegExp(route);
      if (_.isFunction(name)) {
          callback = name;
          name = '';
      }
      if (!callback) callback = this[name];

      var router = this;

      Backbone.history.route(route, function(fragment) {
          let args = router._extractParameters(route, fragment);

          let next = function() {
              callback && callback.apply(router, args);
              router.trigger.apply(router, ['route:' + name].concat(args));
              router.trigger('route', name, args);
              Backbone.history.trigger('route', router, name, args);
              router.after.apply(router, args);
          };

          router.before.apply(router, [args, next]);
      });

      return this;
   }
}

导出默认 BaseRouter；

Answer 2

你可以阅读 article 关于 ES6 classes 的语法。

您可以将 const 移出 class 或者您可以只使用属性并限制其中的 set 部分。它也将是只读的：

get MY_CONST() {
    return {a: 1};
}
set MY_CONST(value) {
    console.warn('Readonly!');
}
render() {
    this.MY_CONST = 2;
}

如果需要，您还可以添加 statics

带有 const 的 ES6 语法错误

ES6 SyntaxError with const

javascript

ecmascript-6

webpack

babeljs