Gulp EcmaScript 6的构造函数非法

hfwmuf9z 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(115)

首先，我想说的是，我真的不知道如何解释我做了什么，以获得在标题中提到的错误（uncaught TypeError: Illegal constructor）.我使用gulpfile，以编译我的Ecmascript 6到纯Javascript.我的gulpfile看起来像这样：

var gulp = require('gulp');
var concat = require('gulp-concat');
var babel = require('gulp-babel');

gulp.task('compile', function () {
    return gulp.src(['resources/assets/js/*.js', 'resources/assets/js/components/*.js'])
        .pipe(babel({
                presets: ['es2015']
        }).on('error', logError))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('watch', function () {
   gulp.watch('resources/assets/js/**/*', ['compile']);
})

gulp.task('default', ['watch']);

function logError(err) {
    console.log(err);
}

我有一个文件系统，在用Babel编译后，所有文件都连接到一个文件（bundle.js）中。
在浏览器控制台（Chrome或Firefox）中，错误出现在下一行：

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

这是这个的未编译程式码：

class Dropdown extends Node {

    constructor(element) {
        super(element);

        this.registerEvents(['click', 'change', 'blur']);
    }

    onClick() {
        this.$element.addClass('clicked');
    }
}

下面是同一个类的编译代码：

var Dropdown = function (_Node) {
    _inherits(Dropdown, _Node);

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

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

        _this.registerEvents(['click', 'change', 'blur']);

        return _this;
    }

    _createClass(Dropdown, [{
        key: 'onClick',
        value: function onClick() {
            this.$element.addClass('clicked');
        }
    }]);

    return Dropdown;
}(Node);

我没有使用export default Dropdown，因为我没有在其他模块中导入模块（这是不需要的，因为每个文件都转换为一个文件，其中的一切都是可访问的）。
我做了一些研究，人们得到这个错误的唯一原因是因为有一个大写字母，而没有一个是允许的。我没有找到任何其他关于这个错误的原因。有人知道为什么我得到这个错误吗？有人有解决办法吗？

gulp

来源：https://stackoverflow.com/questions/41521812/illegal-constructor-with-ecmascript-6

2条答案

按热度按时间

pkbketx91#

这是Google针对此错误信息的第一个搜索结果，它也经常与Web组件一起出现。使用一个看起来完全有效的Web组件，如：

export default class UserAvatar extends HTMLElement {
  constructor() {
    super();
  }
}

如果忘记调用customElements.define并尝试示例化组件，则会出现此错误。
因此，new UserAvatar将因 * 非法构造函数 * 而失败。要修复此问题，请先定义它：
customElements.define('tom-user-avatar', UserAvatar);
这在Firefox和Chrome中都是一个糟糕的错误信息，浏览器供应商应该在这方面做得更好。如果你使用document.createElement而不是new UserAvatar，你可能很快就会发现这个错误，因为它会提醒你还没有设置名称。尽管如此，用构造函数初始化自定义元素是有原因的，比如传入初始化参数。