web-dev-qa-db-ja.com

ES6 / Babelクラスコンストラクターは、「新規」なしでは呼び出すことができません

バブルのテーマを拡張して、カスタムのクイルのテーマを作成しようとしています。奇妙なES6継承の問題に直面しています。コンストラクターでsuper()を呼び出せないようです。これが私のコードです：

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 }

バブルのテーマが見つかりました ここ

私のバベルのプリセット：

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

Webpack jsファイルの設定：

  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: Class constructor BubbleTheme cannot be invoked without 'new'。ただし、LoopThemeはnewでQuill here によって正しく呼び出されます。ステップごとにデバッグする場合、LoopThemeコンストラクターを正しく入力すると、superが呼び出されたときにエラーが発生します。

ここで何か不足していますか？私は常に継承を使用してきましたが、コードの別の場所（クラス間）で使用していますが、ここで問題が発生していますか？

ご協力いただきありがとうございます

javascriptwebpackecmascript-6babelquill
6
guillaumepotier

QuillのBaseThemeを拡張しているときに、まったく同じ問題に遭遇しました。

Bergiが上記のコメントで正しく指摘したように、これは、除外されているbabel-loader内にあるため、node_modules/がクイルのモジュールをトランスパイルしていないという事実に関係しています。

Webpack構成のexcludeオプションを更新し、正規表現を使用してnode_modules/quill/フォルダーをスキップするか、代わりにincludeを使用できます。

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

これを置き換えることもできます：

import BubbleTheme from 'quill/themes/bubble'

これに：

const BubbleTheme = Quill.import('themes/bubble')
3
Maxime Chéramy

別の方法を提案したいと思います。パイプラインでクイルを構築しない場合は、拡張クラスの上のランタイムコンストラクターを非常によく参照できます。

    import { sanitize } from 'quill/formats/link';

    let BlockEmbed = window['Quill'].import('blots/block/embed');

    export class MediaBlot extends BlockEmbed {
        ...
    }
0
Bogdan M.