作者:张芬921_162 | 来源:互联网 | 2023-01-31 19:56
我正在尝试创建一个自定义Quill主题,扩展一个泡泡.我面临一个奇怪的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 = [
'',
''
].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 = ['', ''].join('');
exports.LoopTooltip = LoopTooltip;
exports.default = LoopTheme;
我有以下错误:events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'
.但是,Quill 在这里LoopTheme
正确地调用了new
它.当我逐步调试时,我正确地输入构造函数,并在调用时引发错误.LoopTheme
super
我在这里错过了什么吗?我一直使用继承,我在代码的其他地方(我的课程之间)使用它,我在哪里遇到麻烦?
谢谢你的帮助
1> 小智..:
我在扩展Quill的同时遇到了完全相同的问题BaseTheme
.
正如Bergi在上面的评论中正确指出的那样,这与babel-loader
没有发现Quill模块的事实有关,因为它们在里面node_modules/
,被排除在外.
您可以更新exclude
Webpack配置中的选项并使用正则表达式跳过该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/,
]
}