Question

将我的网站从rails移到wordpress，我试图转换我的es6脚本。但我的编译文件根本没有做任何事情，经过一天的搜索，我被困住了。

我将从第一个es6组件的摘录开始：

import Component from './component';

class AccountTab extends Component {
  constructor(element) {
    super(element);

    this.$tabs = this.$element.find('.accountTab-item');

    this.$menteeTab = this.$element.find('.accountTab-item--mentee');
    this.$mentorTab = this.$element.find('.accountTab-item--mentor');
    this.$teacherTab = this.$element.find('.accountTab-item--teacher');
    this.$pagesTab = this.$element.find('.accountTab-item--pages');

    this.bindEvents();
  }

  bindEvents() {
    this.$menteeTab.on('click.AccountTab', $.proxy(this, 'setMenteeActive'));
    this.$mentorTab.on('click.AccountTab', $.proxy(this, 'setMentorActive'));
    this.$teacherTab.on('click.AccountTab', $.proxy(this, 'setTeacherActive'));
    this.$pagesTab.on('click.AccountTab', $.proxy(this, 'setPagesActive'));
  }

  unbindEvents() {
    this.$menteeTab.off('click.AccountTab');
    this.$mentorTab.off('click.AccountTab');
    this.$teacherTab.off('click.AccountTab');
    //this.$pagesTab.off('click.AccountTab');
  }

  setMenteeActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--active');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--darkpurple');

    this.broadcast('tab-changed.AccountTab', 'mentee');
  }

  setMentorActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--active');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--red');

    this.broadcast('tab-changed.AccountTab', 'mentor');
  }

  setTeacherActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--active');
    this.$pagesTab.addClass('accountTab-item--purple');

    this.broadcast('tab-changed.AccountTab', 'teacher');
  }

  setPagesActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--active');

    this.broadcast('tab-changed.AccountTab', 'pages');
  }

  removeAllClasses() {
    this.$tabs.removeClass('accountTab-item--purple')
              .removeClass('accountTab-item--red')
              .removeClass('accountTab-item--active')
              .removeClass('accountTab-item--darkpurple');
  }
}

AccountTab.initialize = Component.initialize;
AccountTab.unbindEvents = Component.unbindEvents;

export default AccountTab;

这是我调用组件的main.js：

import App from './components/app';
import PageOverHeader from './components/page-over-header';
import PageMenuSection from './components/page-menu-section';
import AccountTab from './components/account-tab';
import HomeExplanation from './components/home-explanation';
import AnchorLink from './components/anchor-link';
import WaitingBar from './components/waiting-bar';

$(() => {
  window.App = new App();
  window.App.registerComponent(PageOverHeader, '.pageOverHeader')
            .registerComponent(PageMenuSection, '.pageMenu-section')
            .registerComponent(AccountTab, '.accountTab')
            .registerComponent(HomeExplanation, '.homeExplanation')
            .registerComponent(AnchorLink, '.anchorLink')
            .registerComponent(WaitingBar, '.waitingBar')
            .initialize();

  window.FastClick.attach(document.body);
});

以下是js文件夹浏览器化的结果。我可以看到此错误Cannot call a class as a function，但不知道如何处理它。

function e(t, n, r) {
  function s(o, u) {
    if(!n[o]) {
      if(!t[o]) {
        var a = typeof require == "function" && require;
        if(!u && a) return a(o, !0);
        if(i) return i(o, !0);
        var f = new Error("Cannot find module '" + o + "'");
        throw f.code = "MODULE_NOT_FOUND", f
      }
      var l = n[o] = {
        exports: {}
      };
      t[o][0].call(l.exports, function(e) {
        var n = t[o][1][e];
        return s(n ? n : e)
      }, l, l.exports, e, t, n, r)
    }
    return n[o].exports
  }
  var i = typeof require == "function" && require;
  for(var o = 0; o < r.length; o++) s(r[o]);
    return s
})({
  1: [function(require, module, exports) {
    'use strict';
          // Require once
          require('./shims/object-create');
          require('./components/account-tab');
          […]
          require('./main');
        }, {
          "./components/account-tab": 2,
          "./components/anchor-link": 3,
          "./components/app": 4,
          "./components/component": 5,
          "./components/home-explanation": 6,
          "./components/page-menu-section": 7,
          "./components/page-over-header": 8,
          "./components/svg": 9,
          "./components/waiting-bar": 10,
          "./main": 11,
          "./shims/object-create": 12
        }],
        2: [function(require, module, exports) {
          'use strict';
          Object.defineProperty(exports, "__esModule", {
            value: true
          });
          var _createClass = function() {
            function defineProperties(target, props) {
              for(var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
              }
            }
            return function(Constructor, protoProps, staticProps) {
              if(protoProps) defineProperties(Constructor.prototype, protoProps);
              if(staticProps) defineProperties(Constructor, staticProps);
              return Constructor;
            };
          }();
          var _component = require('./component');
          var _component2 = _interopRequireDefault(_component);

          function _interopRequireDefault(obj) {
            return obj && obj.__esModule ? obj : {
              default: obj
            };
          }

          function _classCallCheck(instance, Constructor) {
            if(!(instance instanceof Constructor)) {
              throw new TypeError("Cannot call a class as a function");
            }
          }

          function _possibleConstructorReturn(self, call) {
            if(!self) {
              throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
            }
            return call && (typeof call === "object" || typeof call === "function") ? call : self;
          }

          function _inherits(subClass, superClass) {
            if(typeof superClass !== "function" && superClass !== null) {
              throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
            }
            subClass.prototype = Object.create(superClass && superClass.prototype, {
              constructor: {
                value: subClass,
                enumerable: false,
                writable: true,
                configurable: true
              }
            });
            if(superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
          }
          var AccountTab = function (_Component) {
            _inherits(AccountTab, _Component);

            function AccountTab(element) {
              _classCallCheck(this, AccountTab);

              var _this = _possibleConstructorReturn(this, (AccountTab.__proto__ || Object.getPrototypeOf(AccountTab)).call(this, element));

              _this.$tabs = _this.$element.find('.accountTab-item');

              _this.$menteeTab = _this.$element.find('.accountTab-item--mentee');
              _this.$mentorTab = _this.$element.find('.accountTab-item--mentor');
              _this.$teacherTab = _this.$element.find('.accountTab-item--teacher');
              _this.$pagesTab = _this.$element.find('.accountTab-item--pages');

              _this.bindEvents();
              return _this;
            }

            _createClass(AccountTab, [{
              key: 'bindEvents',
              value: function bindEvents() {
                this.$menteeTab.on('click.AccountTab', $.proxy(this, 'setMenteeActive'));
                this.$mentorTab.on('click.AccountTab', $.proxy(this, 'setMentorActive'));
                this.$teacherTab.on('click.AccountTab', $.proxy(this, 'setTeacherActive'));
                this.$pagesTab.on('click.AccountTab', $.proxy(this, 'setPagesActive'));
              }
            }, {
              key: 'unbindEvents',
              value: function unbindEvents() {
                this.$menteeTab.off('click.AccountTab');
                this.$mentorTab.off('click.AccountTab');
                this.$teacherTab.off('click.AccountTab');
      //this.$pagesTab.off('click.AccountTab');
    }
  }, {
    key: 'setMenteeActive',
    value: function setMenteeActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--active');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--darkpurple');

      this.broadcast('tab-changed.AccountTab', 'mentee');
    }
  }, {
    key: 'setMentorActive',
    value: function setMentorActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--active');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--red');

      this.broadcast('tab-changed.AccountTab', 'mentor');
    }
  }, {
    key: 'setTeacherActive',
    value: function setTeacherActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--active');
      this.$pagesTab.addClass('accountTab-item--purple');

      this.broadcast('tab-changed.AccountTab', 'teacher');
    }
  }, {
    key: 'setPagesActive',
    value: function setPagesActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--active');

      this.broadcast('tab-changed.AccountTab', 'pages');
    }
  }, {
    key: 'removeAllClasses',
    value: function removeAllClasses() {
      this.$tabs.removeClass('accountTab-item--purple').removeClass('accountTab-item--red').removeClass('accountTab-item--active').removeClass('accountTab-item--darkpurple');
    }
  }]);

            return AccountTab;
          }(_component2.default);

我使用Grunt来简化这个过程，使用browserify和babelify（es2015预设）。这是我的gruntfile.js配置。

grunt.initConfig({
  // Translate javascript es6 file to one file
  browserify: {
    options: {
      transform: [
        ["babelify", {
          presets: ['es2015'],
          plugins: ["transform-async-to-generator"]
        }]
      ]
    },
    dist: {
      files: {
        './javascripts/dist/application.js': './javascripts/src/application.js',
        './javascripts/dist/vendor.js': './javascripts/src/vendor.js'
      }
    }
  },
  […]
});

Answer 1

我自己解决了这个问题，它源于我的vendor.js在开始时需要jquery这一事实，但是browserify最终将函数放在最后，因此jquery在需要使用它之后。

所以我单独调用了jquery。

透明的es6脚本错误

1 个答案: