如何将LlamaIndex TypeScript代码转为浏览器可用的JavaScript？

编译阶段错误 #

使用tsc filename.ts编译LlamaIndex TypeScript代码时，出现两个错误：

node_modules/llamaindex/dist/type/types.d.ts:5:37 - error TS2307: Cannot find module '@llamaindex/core/schema' or its corresponding type declarations.
  There are types at '/Users/kd/ragts/node_modules/@llamaindex/core/dist/schema/index.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

5 import type { EngineResponse } from "@llamaindex/core/schema";
                                      ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/lru-cache/dist/cjs/index.d.ts:15:5 - error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.

15     #private;

浏览器运行阶段错误 #

编译完成后，在浏览器中运行转换后的JS代码时，抛出以下错误：

VM104:38 Uncaught ReferenceError: exports is not defined
    at <anonymous>:38:23

对应的出错代码片段：

Object.defineProperty(exports, "__esModule", { value: true });
var llamaindex_1 = require("llamaindex");

当前使用的tsconfig.json配置：

{
    "compilerOptions": {
      "target": "ES2022",
      "module": "esnext",
      "moduleResolution": "bundler",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true,
      "lib": ["ES2022"],
      "types": ["node"],
      "outDir": "./lib",
      "tsBuildInfoFile": "./lib/.tsbuildinfo",
      "incremental": true,
      "composite": true
    },
    "ts-node": {
      "files": true,
      "compilerOptions": {
        "module": "commonjs"
      }
    },
    "include": ["./**/*.ts"]
  }

1. 修复TypeScript编译错误 #

修改tsconfig.json的编译选项，解决模块解析和语法支持问题：

{
    "compilerOptions": {
      "target": "ES2022",
      "module": "ESNext",
      "moduleResolution": "node16", // 替换原bundler，适配@llamaindex/core的模块结构
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true,
      "lib": ["ES2022", "DOM"], // 添加DOM库，适配浏览器环境
      "types": [], // 移除node类型，避免浏览器环境的类型冲突
      "outDir": "./lib",
      "tsBuildInfoFile": "./lib/.tsbuildinfo",
      "incremental": true,
      "composite": true,
      "declaration": false // 不需要类型声明时可开启，减少编译产物
    },
    "ts-node": {
      "files": true,
      "compilerOptions": {
        "module": "commonjs"
      }
    },
    "include": ["./**/*.ts"]
  }

• 调整moduleResolution为node16：解决@llamaindex/core的模块导入解析问题
• 添加DOM到lib数组：提供浏览器环境的DOM类型支持
• 清空types数组：移除Node.js专属类型，避免浏览器环境的类型冲突

2. 解决浏览器运行时的exports错误 #

直接用tsc编译的代码仍会保留Node.js模块语法（如require、exports），浏览器原生不支持这类语法，必须通过打包工具处理：

推荐使用Vite打包（轻量高效） #

1. 初始化Vite项目：

   npm create vite@latest my-llamaindex-app -- --template vanilla-ts
   cd my-llamaindex-app
   

2. 安装LlamaIndex依赖：

   npm install llamaindex
   

3. 将你的业务TS代码替换到src/main.ts中
4. 打包生产环境代码：

   npm run build
   

5. 打包完成后，dist目录下的文件可直接在浏览器中运行（通过本地服务器打开，如npx serve dist）

若坚持使用tsc（仅适用于无Node.js依赖的简单场景） #

需将模块输出改为纯ES模块，并手动处理所有Node.js专属依赖：

• 在tsconfig.json中添加"module": "ES6"，"moduleResolution": "node16"
• 确保代码中仅使用ES模块语法（import/export，而非require/exports）
• 替换所有Node.js专属依赖为浏览器兼容版本（但LlamaIndex核心依赖多为Node.js环境，此方案局限性大）

3. 额外注意事项 #

• LlamaIndex TS的浏览器支持需使用其官方适配的API，避免调用Node.js专属功能（如文件系统操作）
• 若需在浏览器中加载本地文件，需通过File API实现，不可直接使用Node.js的fs模块

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