没有'new'就无法调用ES6 / Babel Class构造函数 [英] ES6/Babel Class constructor cannot be invoked without 'new'

问题描述

我正在尝试创建一个自定义Quill主题，扩展一个泡泡。我面临着一个奇怪的ES6继承问题，我的构造函数中似乎无法调用 super（）。这是我的代码：

I'm trying to create a custom Quill theme, extending the bubble one. I'm facing a strange ES6 inheritance problem, where it seems I cannot call super() in my constructor. Here is my code:

import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble'

class LoopTheme extends BubbleTheme {
  constructor (quill, options) {
    super(quill, options)
  }

  extendToolbar (toolbar) {
    super.extendToolbar(toolbar)
    this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
    this.tooltip.root.appendChild(toolbar.container);
  }
}

class LoopTooltip extends BubbleTooltip {

}

LoopTooltip.TEMPLATE = [
  '<span class="ql-tooltip-arrow"></span>',
  '<div class="ql-tooltip-editor">',
    '<input type="text" data-formula="e=mc^2" data-link="https://myurl.com" data-video="Embed URL">',
    '<a class="ql-close"></a>',
  '</div>'
].join('');

export { LoopTooltip, LoopTheme as default }

可以找到泡泡主题此处

我的Babel预设：

{
    "presets": [
        "es2015",
        "es2016",
        "stage-0",
        "react"
    ]
}

Webpack js文件配置：

Webpack js file config:

  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          resolve(__dirname, 'app')
        ],
        loader: 'babel-loader',
        exclude: /node_modules/
      }, {...

输出生成的代码：

var LoopTheme = function (_BubbleTheme) {
  _inherits(LoopTheme, _BubbleTheme);

  function LoopTheme() {
    _classCallCheck(this, LoopTheme);

    return _possibleConstructorReturn(this, (LoopTheme.__proto__ || Object.getPrototypeOf(LoopTheme)).apply(this, arguments));
  }

  _createClass(LoopTheme, [{
    key: 'extendToolbar',
    value: function extendToolbar(toolbar) {
      _get(LoopTheme.prototype.__proto__ || Object.getPrototypeOf(LoopTheme.prototype), 'extendToolbar', this).call(this, toolbar);
      this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
      this.tooltip.root.appendChild(toolbar.container);
    }
  }]);

  return LoopTheme;
}(_bubble2.default);

var LoopTooltip = function (_BubbleTooltip) {
  _inherits(LoopTooltip, _BubbleTooltip);

  function LoopTooltip() {
    _classCallCheck(this, LoopTooltip);

    return _possibleConstructorReturn(this, (LoopTooltip.__proto__ || Object.getPrototypeOf(LoopTooltip)).apply(this, arguments));
  }

  return LoopTooltip;
}(_bubble.BubbleTooltip);

LoopTooltip.TEMPLATE = ['<span class="ql-tooltip-arrow"></span>', '<div class="ql-tooltip-editor">', '<input type="text" data-formula="e=mc^2" data-link="myurl.com" data-video="Embed URL">', '<a class="ql-close"></a>', '</div>'].join('');

exports.LoopTooltip = LoopTooltip;
exports.default = LoopTheme;

我遇到以下错误： events.js：59 Uncaught TypeError ：没有'new'，不能调用类构造函数BubbleTheme。但是，Quill new 调用 LoopTheme quilljs / quill / blob / develop / core / quill.js＃L84rel =noreferrer>这里。当我逐步调试时，我正确地输入 LoopTheme 构造函数，并在调用 super 时引发错误。

I'm having the following error: events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'. However, the LoopTheme is correctly called with new by Quill here. When I debug step by step, I correctly enter the LoopTheme constructor, and the error is raised when super is called.

我在这里遗漏了什么吗？我一直使用继承，我在代码的其他地方（我的课程之间）使用它，我在哪里遇到麻烦？

Am I missing something here? I've always used inheritance, and I use it elsewhere in my code (between my classes), where here am I having trouble?

感谢您的帮助

推荐答案

我在扩展Quill的 BaseTheme 时遇到了同样的问题。

I ran into the exact same issue while extending Quill’s BaseTheme.

正如Bergi在上面的评论中正确指出的那，这与 babel-loader isn的事实有关不会发现Quill的模块，因为它们位于 node_modules / 里面，不包括在内。

As Bergi correctly pointed out in the comments above, this has to do with the fact that babel-loader isn’t transpiling Quill’s modules because they're inside node_modules/, which is excluded.

你可以更新您的Webpack配置中排除选项并使用正则表达式跳过 node_modules / quill / 文件夹或使用 include 而不是：

You can either update the exclude option in your Webpack config and use a regex to skip the node_modules/quill/ folder or use include instead:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    path.join(__dirname, '../src'), // + any other paths that need to be transpiled
    /\/node_modules\/quill/,
  ]
}

这篇关于没有'new'就无法调用ES6 / Babel Class构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！