Skip to content

引用 'monaco-editor/esm/vs/editor/editor.api' 导致出现循环引用问题 #144

@jin-sir

Description

@jin-sir

description

image
如图,在 filter/monaco-editor-core 导出了 'monaco-editor/esm/vs/editor/editor.api'。
在项目中,配置官方提供的 plugin monaco-editor-webpack-plugin。查看 plugin 的源码可知:
image
这个 plugin 在本地编译 / 打包时,会匹配 editor.api.js 和 editor.main.js,使用 loader 处理,loader 中干了什么呢?
image
可以看到,language 的 导入语句 会在最后被写入(在上一张图中可以看到 post 表示 language 集合)。
下图是本地启动后,webpack 热更新生成的临时文件,可以看到 plugin 的效果。
image

在项目中,导入 monaco-sql-language ,在其中导出的内容中, monaco-sql-languages/esm/_.contribution.js 文件中导入了 './fillers/monaco-editor-core'。monaco-editor-core 导出 monaco-editor/esm/vs/editor/editor.api。即:

// app.js
import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages';
...

// monaco-sql-languages/main.js
export * from './_.contribution';

// monaco-sql-languages/esm/_.contribution.js
import { languages } from './fillers/monaco-editor-core'; 

// monaco-sql-languages/esm/fillers/monaco-editor-core
export * from 'monaco-editor/esm/vs/editor/editor.api';

本地编辑 / 打包后,被处理的 monaco-editor/esm/vs/editor/editor.api.js 文件中会存在 monaco-sql-language 中 language 的导入。而在导入的 language 文件中,又导入了 monaco-sql-languages/esm/_.contribution.js ,存在循环引用的问题。导致 ReferenceError: Cannot access 'N' before initialization 的问题。

#98 的解决办法是在这之前先引用一下 editor.api.js 这个文件

import 'monaco-editor/esm/vs/editor/editor.api';

虽然这样也会导致编译到 monaco-sql-languages/esm/_.contribution.js 文件中的 import { languages } from './fillers/monaco-editor-core'; 这一行时失败,失败是在 require配置的custom language处,上面的是正常加载(包括editor.api.js),加载的内容存在缓存中,在下次进入到 _.contribution.js 文件时,import { languages } from './fillers/monaco-editor-core'; 会直接从缓存中取。

请问有什么更好的解决办法吗?上面这个方法虽然可以解决现有的问题,但是在不知道这个问题的人看到这段代码时,会产生疑惑(比如我)。如果没有注释,可能顺手就删掉了。

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions