CKEditor5：无法读取未定义的属性“pluginName”

我正在尝试为 CKEditor 制作一个自定义图像插件，它与我的定制图像上传系统集成。主要是，我在设置这个插件时遇到了问题。当我加载“开箱即用”插件时，一切正常（此外，当我删除自己的插件时，一切又像以前一样）。

我收到以下控制台错误：

main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322 TypeError: Cannot read property 'pluginName' of undefined
    at new ga (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:360)
    at new Ul (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:521)
    at new Lc (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at new pp (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1318)
    at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at new Promise (<anonymous>)
    at Function.create (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at Module.<anonymous> (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322)
    at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1)
    at main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1

pluginName除了CKEditor 上的以下文档摘录外，我找不到有关该属性的任何信息：

pluginName: 字符串 | 不明确的

插件的可选名称。如果设置，插件将通过其名称和构造函数在 get 中可用。如果没有，则只能通过其构造函数。

该名称应反映构造函数名称。

为了保持插件类定义紧密，建议将此属性定义为静态 getter：

export default class ImageCaption {
    static get pluginName() {
        return 'ImageCaption';
    }
}

注意：本机 Function.name 属性不能用于保留插件名称，因为它会在代码缩小期间被破坏。

将此函数插入​​我的插件代码不起作用，所以我在这里有点迷失了可能是什么问题。我在下面包含了我的代码。我已经根据CKEditor 高级设置，第一个选项，在 Webpack 中进行了设置。

我遗漏了什么，还是我的代码有问题？

索引.js

import ClassicEditor from './ckeditor'; // ckeditor.js in the same folder
import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
require("./css/index.css");
ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#editor' ))
    .then( editor => {
      editor.commands.get( 'imageStyle' ).on( 'execute', ( evt, args ) => {
          // ...
          // this snippet of code works; it concerns hooking into the default image plugin
          // ...
      } );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

ckeditor.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

import ImageLibrary from './js/image-library.js'; // file containing the code for my custom plugin

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    UploadAdapterPlugin,
    AutoformatPlugin,
    BoldPlugin,
    ItalicPlugin,
    Highlight,
    MediaEmbed,
    Table,
    TableToolbar,
    ImagePlugin,
    ImageCaptionPlugin,
    ImageStylePlugin,
    ImageToolbarPlugin,
    ImageUploadPlugin,
    LinkPlugin,
    ListPlugin,
    ParagraphPlugin,
    ImageLibrary // my custom plugin
];

ClassicEditor.defaultConfig = {
  highlight: {
        options: [
          {
                model: 'redPen',
                class: 'pen-red',
                title: 'Red pen',
                color: '#DD3300',
                type: 'pen'
            },
            {
                model: 'bluePen',
                class: 'pen-blue',
                title: 'Blue pen',
                color: '#0066EE',
                type: 'pen'
            },
            {
                model: 'greenPen',
                class: 'pen-green',
                title: 'Green pen',
                color: '#22AA22',
                type: 'pen'
            }
        ]
    },
    toolbar: {
        items: [
            //'heading',
            //'|',
            'bold',
            'italic',
            'link',
            'highlight:redPen', 'highlight:greenPen', 'highlight:bluePen', 'removeHighlight',
            '|',
            'bulletedList',
            'numberedList',
            '|',
            'mediaembed',
            'inserttable',
            '|',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:alignCenter',
            '|',
            'imageTextAlternative'
        ],
        styles: [
          'full','alignCenter'
        ]
    },
    table : {
      contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
    },
    language: 'nl'
};

图像库.js

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
import Command from '@ckeditor/ckeditor5-core/src/command';

class RoodCMSImageCommand extends Command {
    static get requires() {
        return [ ModelElement ];
    }
    execute( message ) {
      console.log(message);
    }
}
class ImageLibrary extends Plugin {
    static get requires() {
        return [ ModelElement ];
    }
    static get pluginName() {
        return 'ImageLibrary';
    }
    init() {
        // Initialize your plugin here.
        const editor = this.editor;
        console.log("plugin initialized.",editor);
    }
}

更新：基于 Maciej Bukowski 回答的解决方案

Maciej 指出该类ImageLibrary（我尝试导入的）缺少export. 我很容易遗漏的一点是，无论何时您正在使用import某样东西，您都必须同时使用export它，否则它将无法使用。关键字export default对我有用。

罪魁祸首是 image-library.js，为此我更改了以下行：

class ImageLibrary extends Plugin {
    // ... this failed, as it missed the `export default` keywords
}

进入以下内容：

export default class ImageLibrary extends Plugin {
    // ... works, as I properly export what I want to import.
}