React中Monaco编辑器实现浏览器装npm包及代码自动补全方案咨询

核心实现思路 #

不用手动逐个指定类型文件路径，通过自动解析包的类型入口、递归拉取关联类型文件的方式批量注入，具体步骤如下：

• 先获取用户已安装的npm包列表，对每个包优先读取自身携带的类型定义，无内置类型时自动拉取对应@types/[包名]的社区类型
• 动态拉取包的package.json文件，解析得到类型主入口路径
• 递归拉取主类型文件关联的所有子类型文件，统一注入Monaco的TypeScript语言服务中

可直接复用的实现代码 #

import axios from 'axios'
import * as monaco from 'monaco-editor'

// 自动注入单个npm包所有类型定义的通用方法
async function injectPackageTypes(packageName: string): Promise<void> {
  let targetPkg = packageName
  let pkgJson: Record<string, any>

  // 1. 优先读取包自身类型，无内置类型则切换到@types社区类型包
  try {
    const { data: originPkgJson } = await axios.get(`https://unpkg.com/${packageName}/package.json`)
    pkgJson = originPkgJson
    if (!pkgJson.types && !pkgJson.typings && !packageName.startsWith('@types/')) {
      // 处理带scope的包：@scope/pkg 对应 @types/scope__pkg
      targetPkg = `@types/${packageName.replace(/^@/, '').replace('/', '__')}`
      const { data: typesPkgJson } = await axios.get(`https://unpkg.com/${targetPkg}/package.json`)
      pkgJson = typesPkgJson
    }
  } catch (err) {
    console.warn(`${packageName} 暂无可用类型定义，自动补全将失效`)
    return
  }

  // 2. 解析类型主入口路径
  const mainTypeEntry = pkgJson.types || pkgJson.typings || 'index.d.ts'
  const pkgBaseUrl = `https://unpkg.com/${targetPkg}/`
  const loadedFileSet = new Set<string>()

  // 3. 递归加载所有关联类型文件并注入
  const loadDtsFile = async (filePath: string) => {
    if (loadedFileSet.has(filePath)) return
    loadedFileSet.add(filePath)

    try {
      const fullUrl = new URL(filePath, pkgBaseUrl).href
      const { data: dtsContent } = await axios.get(fullUrl)
      
      // 注入到Monaco TypeScript语言服务
      monaco.languages.typescript.typescriptDefaults.addExtraLib(
        dtsContent,
        `file:///node_modules/${targetPkg}/${filePath}`
      )

      // 匹配/// <reference path="xxx" /> 引用
      const referenceReg = /\/\/\/\s*<reference\s+path="([^"]+)"\s*\/>/g
      let matchResult: RegExpExecArray | null
      while ((matchResult = referenceReg.exec(dtsContent))) {
        await loadDtsFile(matchResult[1])
      }

      // 匹配相对路径import引用
      const importReg = /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g
      while ((matchResult = importReg.exec(dtsContent))) {
        const importPath = matchResult[1]
        if (importPath.startsWith('./') || importPath.startsWith('../')) {
          const normalizedPath = importPath.endsWith('.d.ts') ? importPath : `${importPath}.d.ts`
          await loadDtsFile(normalizedPath)
        }
      }
    } catch (err) {
      console.warn(`加载类型文件${filePath}失败`)
    }
  }

  await loadDtsFile(mainTypeEntry)
}

优化建议 #

• 增加缓存逻辑：将已拉取过的类型文件存入IndexedDB或LocalStorage，同一个版本的包重复安装时无需再次拉取，提升加载速度
• 调整Monaco TypeScript配置：开启allowSyntheticDefaultImports、esModuleInterop，将moduleResolution设置为node，对齐npm包的模块解析逻辑，避免类型识别异常
• 高并发场景优化：如果有大量包需要同时注入，可以增加并发控制逻辑，避免同时发起过多请求被CDN拦截

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