编译es6脚本错误
Transpiled es6 script error
移动我的网站从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'
}
}
},
[…]
});
我自己修复了这个问题，它来自于我的vendor.js在开始时需要jquery，但是browserify把函数放在最后，因此jquery之后需要使用它。
所以我单独调用了jquery
相关文章：
- 动态创建的iframe中的window.onerror在lne 0处给出脚本错误
- 加载Chrome扩展中的脚本错误
- 扩展错误es6类模块问题
- Jquery 脚本错误“访问被拒绝”
- 如何防止 C# Web 浏览器中的脚本错误
- 在jquery中重构“停止运行此脚本?”错误
- "停止运行脚本错误“;在IE8中拥有大量收藏
- 避免使用神秘的javascript"脚本错误”;使用cdn
- java脚本错误对象没有'不支持此属性或方法
- 禁用文本框的脚本错误显示
- 谷歌SWIFFY无法在IE9中工作-脚本错误'运行时.js'
- 悬停时IE 8中的脚本错误
- Chrome扩展:如何在全局范围内捕获/处理内容脚本错误
- Liferay主题脚本错误:未捕获语法错误:意外的标记ILLEGAL
- Java脚本错误-can't将未定义转换为对象
- j查询文件上传脚本错误
- IE 与 FireFox 中的 Java 脚本错误
- 一些脚本错误，找不到解决方案
- JavaScript var 分配一个动态可为空的值显示脚本错误
- 编译es6脚本错误
