monaco-editor中动态调用addExtraLibs加载自定义源内容的实现咨询

1. 动态调用addExtraLibs方法实现自定义源内容加载 #

monaco.languages.typescript.[javascript|typescript]Defaults.addExtraLib 方法本身支持在编辑器运行的任意阶段动态调用，不需要提前在初始化环节注册，仅需要保证你拿到的自定义源返回的内容是符合TypeScript d.ts规范的类型定义文件即可。
调用时需要传入两个参数：第一个是类型文件的完整内容字符串，第二个是全局唯一的文件路径标识（推荐格式为file:///node_modules/[包名]/index.d.ts），用于monaco内部识别，避免重复添加。
如果需要后续更新或者删除已添加的库，可以把addExtraLib返回的disposable对象存储下来，调用dispose()方法即可移除该库的类型定义。
示例代码：

// 以TypeScript语言环境为例
const libName = "somelib";
const libContent = await axios.get("/libs", { params: libName }).then(res => res.data);
const libUri = `file:///node_modules/${libName}/index.d.ts`;
// 调用方法添加额外库
const disposable = monaco.languages.typescript.typescriptDefaults.addExtraLib(libContent, libUri);

2. 监听import语句触发动态加载的实现逻辑 #

完整实现分为三步：监听编辑器内容变化、匹配导入语句、去重后加载类型库：

1. 绑定编辑器的onDidChangeModelContent内容变更事件，每次用户输入时触发检测
2. 用正则或者语法解析工具提取当前代码中所有import、require语句对应的包名
3. 维护已加载包名的集合，检测到未加载的包时发起请求，拿到内容后调用addExtraLib添加即可
   示例代码：

const loadedLibs = new Set<string>();
// 匹配import和require语句的正则，简单场景可直接使用，复杂场景推荐用AST解析
const importRegex = /import\s+.*?from\s+['"](.*?)['"]|require\s*\(\s*['"](.*?)['"]\s*\)/g;

editor.onDidChangeModelContent(async () => {
  const code = editor.getValue();
  let match: RegExpExecArray | null;
  // 遍历所有匹配到的包名
  while ((match = importRegex.exec(code)) !== null) {
    const libName = match[1] || match[2];
    // 跳过空值和已加载的包
    if (!libName || loadedLibs.has(libName)) continue;
    // 先标记为已加载，避免同一次变更触发多次重复请求
    loadedLibs.add(libName);
    try {
      const libContent = await axios.get("/libs", { params: libName }).then(res => res.data);
      monaco.languages.typescript.typescriptDefaults.addExtraLib(
        libContent,
        `file:///node_modules/${libName}/index.d.ts`
      );
    } catch (e) {
      // 加载失败移除标记，后续内容变更时可以重试
      loadedLibs.delete(libName);
    }
  }
});

如果需要处理动态导入、别名导入等复杂场景，避免正则匹配的误差，可以引入语法解析工具直接解析AST提取导入的包名。 #

3. 可辅助实现需求的其他工具 #

• 类型定义获取工具：@types 开源类型包集合、TypeScript内置的typescript/lib标准库类型，你可以把这些资源提前部署到你的自定义源服务，不需要自己手写类型定义。
• 语法解析工具：@babel/parser、acorn 可以精准解析代码AST提取导入语句，比正则匹配更稳定，支持处理所有合法的JS/TS导入语法。
• 打包工具：esbuild、rollup 可以把零散的d.ts文件打包成单文件，避免加载一个库需要请求多个依赖文件的问题，提升加载速度。
• 本地缓存工具：可以用localStorage或者IndexedDB缓存已经加载过的类型定义文件，避免重复请求相同的库内容，降低服务端压力。

内容的提问来源于stack exchange，提问作者Егор Лебедев