时间戳

首页 > 解决方案 > 未找到模块：错误：无法解析...使用外部 JS 库时

javascript - 未找到模块：错误：无法解析...使用外部 JS 库时

问题描述

我正在尝试在我的 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;
  }
  ...
}

现在我不想添加他们的扩展之一（表一：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上重现我的工作区

谢谢你的帮助

标签： javascriptnode.jsangulartypescriptwysiwyg

解决方案

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

这包括：

  • 项目中使用的所有依赖项（jquery、highlightjs ...）
  • 表扩展

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

这不是最好的解决方案，它没有回应主要问题，但它有效：/

推荐阅读