Monaco Editor加载项目时node_modules入口解析失败求助

问题根源 #

1. Monaco的TypeScript服务不会自动扫描node_modules内包的package.json，必须显式加载才能识别main字段定义的入口路径。
2. 无官方类型声明（无@types包或根目录index.d.ts）的模块，TypeScript会抛出类型找不到的错误。

解决方案1：加载目标包的package.json #

Monaco的Node.js模块解析依赖package.json定位入口，需将node_modules/delayed-stream/package.json加载到编辑器：

// 读取delayed-stream/package.json内容后执行
const pkgUri = monaco.Uri.parse('file:///node_modules/delayed-stream/package.json');
monaco.editor.createModel(pkgJsonContent, 'json', pkgUri);

加载后Monaco就能识别该包的入口为lib/delayed_stream.js，解决模块路径找不到的问题。

解决方案2：补充无类型包的类型声明 #

针对无官方类型的包，手动创建类型声明并加载：

1. 创建typings/delayed-stream/index.d.ts：

declare module 'delayed-stream' {
  export default function delayedStream(options?: {
    highWaterMark?: number;
    pauseStream?: boolean;
  }): NodeJS.ReadWriteStream;
}

2. 将该文件加载到Monaco的TypeScript服务：

const dtsUri = monaco.Uri.parse('file:///typings/delayed-stream/index.d.ts');
const dtsContent = /* 读取上述文件的内容 */;

monaco.languages.typescript.typescriptDefaults.addExtraLib(dtsContent, dtsUri.toString());
monaco.languages.typescript.javascriptDefaults.addExtraLib(dtsContent, dtsUri.toString());
monaco.editor.createModel(dtsContent, 'typescript', dtsUri);

此步骤解决Cannot find module ... or its corresponding type declarations的类型错误。

解决方案3：配置模块路径映射（可选） #

若仍有问题，通过paths强制映射模块到实际文件：

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  // 保留原有配置
  target: monaco.languages.typescript.ScriptTarget.ESNext,
  alwaysStrict: true,
  allowNonTsExtensions: true,
  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
  module: monaco.languages.typescript.ModuleKind.CommonJS,
  noEmit: true,
  esModuleInterop: true,
  allowJs: true,
  skipLibCheck: true,
  allowSyntheticDefaultImports: true,
  baseUrl: './',
  // 添加paths配置
  paths: {
    'delayed-stream': ['./node_modules/delayed-stream/lib/delayed_stream.js']
  }
});

验证要点 #

• 确认目标包的package.json、入口js文件、类型声明文件均已通过createModel或addExtraLib加载。
• 确保moduleResolution已设置为NodeJs（你的现有配置已满足）。

内容的提问来源于stack exchange，提问作者jProg2015