Module not found: Error: Can't resolve ... when using external JS library

Module not found: Error: Can't resolve ... when using external JS library

我正在尝试在我的 Angular2+ 应用程序中使用 WYSIWYG 编辑器 (TUI Editor)。 他们不提供 Angular 包装器,因此我决定创建自己的包装器(基于此 wrapper)。

由于使用 npm install 时出现一些问题,我将他们的脚本文件 (https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.0/tui-editor-Editor-full.js) 保存在一个文件夹中。

我创建了一个服务来创建编辑器的一个实例,它工作正常:

import {ElementRef, Injectable} from '@angular/core';
import Editor from '../js/tui-editor-Editor-full';

@Injectable({
  providedIn: 'root'
})
export class TuiService {

  editor: any;

  createEditor(options: object, element: ElementRef): any {
    if (options) {
      this.editor = new TuiEditor(Object.assign({
          el: element.nativeElement
        },
        options));
    }
    return this.editor;
  }
  ...
}

现在我不想添加他们的扩展之一(table 之一:https://github.com/nhn/tui.editor/blob/master/docs/using-extensions.md)但我遇到了一些问题。

当我以与添加编辑器脚本文件相同的方式添加扩展脚本时

import '../js/tui-editor-extTable';

我在构建我的应用程序时遇到了这些错误

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor' in 'C:\workspace\src\js'

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor/dist/tui-editor-Viewer' in 'C:\workspace\src\js'

ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'jquery' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'to-mark' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-code-snippet' in 'C:\workspace\src\js'
i 「wdm」: Failed to compile.

如果你看一下 tui-editor-Editor-full.js 所有这些依赖项都已经包含在这个文件中。 为什么 tui-editor-extTable.js 脚本看不到它们?

如何使用此扩展程序?

我安装了 jquery 作为我项目的依赖项,但它似乎仍然没有被 tui-editor-extTable.js 脚本识别。

我试图在 stackblitz

上重现我的工作区

感谢您的帮助

我最终决定克隆 tui-editor 存储库以使用自定义 webpack 配置创建我自己的 tui-Editor js 文件。

它包括:

  • 项目中使用的所有依赖项(jquery、highlightjs...)
  • table 扩展

所以我只需要在我的代码中导入这个文件。

这不是最好的解决方案,它没有回答主要问题,但它有效:/