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 扩展
所以我只需要在我的代码中导入这个文件。
这不是最好的解决方案,它没有回答主要问题,但它有效:/
我正在尝试在我的 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 扩展
所以我只需要在我的代码中导入这个文件。
这不是最好的解决方案,它没有回答主要问题,但它有效:/