如何在两个TypeScript GitHub仓库间导出导入对象？报错排查

问题背景 #

我有两个TypeScript编写的GitHub仓库：一个存储初始数据（记为initials仓库），另一个是业务主项目。尝试在主项目中导入initials仓库的对象时，出现了编译报错。

初始数据仓库代码 #

入口文件（index.ts）：

import { listInitials} from "./src/list";
import { settingsInitials} from "./src/settings";
import { IInitials } from "./src/types";

const initials : IInitials= {
  listInitials,
  settingsInitials
}

export default initials

类型定义文件（src/types.ts）：

export interface IListInitials extends Object {
    [key: string]: any;
 }

export interface ISettingsInitials extends Object {
    [key: string]: any;
}  

export interface IInitials{
  listInitials: IListInitials ,
  settingsInitials: ISettingsInitials 
}

主项目配置与导入代码 #

package.json依赖配置：

"dependencies": {
    "initials": "git+https://github.com/username/initials.git",
}

主项目导入代码（index.ts）：

import * as Initials from "initials";
console.log(Initials);

报错信息 #

./node_modules/initials/index.ts 6:15
Module parse failed: Unexpected token (6:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|
|
> const initials : IInitials= {
|   listInitials,
|   settingsInitials

问题原因 #

直接将TypeScript源码仓库作为依赖引入时，主项目的webpack（或其他构建工具）不会默认编译node_modules目录下的TS文件，导致TS专属语法（比如类型注解 : IInitials）无法被解析，从而抛出解析错误。

解决步骤 #

1. 对初始数据仓库进行编译打包 #

initials仓库需要先编译为JavaScript代码，并生成对应的类型声明文件，这样主项目才能直接使用。

• 安装TypeScript开发依赖：

npm install typescript --save-dev

• 在仓库根目录创建tsconfig.json，配置编译规则（示例）：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true, // 自动生成类型声明文件(.d.ts)
    "outDir": "./dist", // 编译产物输出目录
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*", "index.ts"],
  "exclude": ["node_modules"]
}

• 修改仓库的package.json，指定入口文件并添加编译脚本：

{
  "name": "initials",
  "main": "dist/index.js", // 指向编译后的JS入口
  "types": "dist/index.d.ts", // 指向类型声明文件
  "scripts": {
    "build": "tsc"
  }
}

• 执行编译命令，生成dist目录：

npm run build

• 将dist目录推送到GitHub仓库（确保.gitignore没有忽略该目录）。

2. 主项目重新安装依赖 #

删除旧的依赖后重新安装：

npm uninstall initials
npm install git+https://github.com/username/initials.git

3. 调整主项目的导入方式 #

因为初始仓库使用的是默认导出，主项目可以直接这样导入：

import Initials from "initials";
console.log(Initials);

如果坚持使用import * as Initials的写法，需要在初始仓库添加命名导出：

// 初始仓库index.ts
export default initials;
export { initials }; // 添加命名导出

额外注意事项 #

• 确保初始仓库package.json中的main和types字段指向正确的文件路径。
• 如果主项目使用Vite等其他构建工具，核心逻辑一致：优先使用依赖仓库编译后的产物，而非直接引入TS源码；若特殊情况需要编译node_modules中的包，需单独配置构建规则（不推荐，会增加构建耗时）。

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