Parcel构建TypeScript内部库后无法在Vue项目正常导入

我通过 npm install git+ssh://git@github.com:companyName/internal-lib.git#master 安装了自用的TypeScript内部库，但无法直接从库根路径导入，仅能通过完整源码路径（如 import { UtilDatetime } from '@companyName/internal-lib/src/main'）导入。同时Parcel未生成配置中指定的dist/types.d.ts文件，IDE报出以下类型错误：

TS7016: Could not find a declaration file for module '@companyName/internal-lib'. '/Users/myNameHere/Documents/contribute/companyName/fe/cms-thing/node_modules/@companyName/internal-lib/dist/main.js'

implicitly has an 'any' type.
Try npm i --save-dev @types/companyName__internal-lib
if it exists or add a new declaration (.d.ts) file containing declare module '@companyName/internal-lib';

库的package.json配置 #

{
  "name": "@companyName/internal-lib",
  "private": true,
  "version": "1.0.1",
  "description": "",
  "scripts": {
    "build": "parcel build"
  },
  "main": "dist/main.js",
  "type": "module",
  "css": "dist/style.css",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "targets": {
    "main": {
      "source": "src/main.ts"
    },
    "css": {
      "source": "src/style.css"
    }
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "dayjs": "^1.11.7"
  },
  "devDependencies": {
    "@parcel/transformer-typescript-tsc": "^2.8.3",
    "parcel": "^2.8.3",
    "typescript": "^5.0.4"
  }
}

库的src/main.ts代码 #

import dayjs from 'dayjs'

class UtilDatetime {
    /**
     *
     * @param date {string}
     * @param format { string}
     * @return {*|string}
     */
    static formatDate(date: string, format = 'DD MMMM YYYY, HH:mm Z'): string {
        return date ? dayjs(date).format(format) : '-'
    }
}

export { UtilDatetime }

请问构建过程是否存在问题？为何无法直接从库根路径导入？

1. Parcel未生成类型文件的原因及修复 #

Parcel不会默认生成TypeScript声明文件，需通过配置开启：

• 在库根目录创建tsconfig.json，启用声明文件生成：

  {
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "dist",
      "emitDeclarationOnly": false
    },
    "include": ["src/**/*"]
  }
  

• 确保@parcel/transformer-typescript-tsc依赖已正确安装（你的配置中已包含），Parcel会读取tsconfig配置自动生成.d.ts文件。

2. 无法从库根路径导入的问题 #

核心原因 #

• 导入语句与导出方式不匹配：你的代码使用的是命名导出export { UtilDatetime }，但你尝试用默认导入import UtilDateTime from '@companyName/internal-lib'，且类名拼写错误（UtilDateTime vs 代码中的UtilDatetime）。
• 类型文件缺失：IDE无法识别库的导出结构，只能通过源码路径直接读取类型。
• 构建产物的导出结构问题：若Parcel构建后的dist/main.js未正确保留导出结构，也会导致根路径导入失效。

修复步骤 #

（1）修正导入语句

使用命名导入匹配代码中的导出方式：

import { UtilDatetime } from '@companyName/internal-lib'

若需要支持默认导入，可在src/main.ts中补充默认导出：

export default UtilDatetime;
export { UtilDatetime };

（2）确保Parcel构建产物正确导出

检查dist/main.js的内容，应包含：

export { UtilDatetime };

若缺失，可调整Parcel的targets配置，或确保源码中的导出语句无语法问题。

（3）验证类型文件生成

构建后检查dist目录下是否存在types.d.ts，正确内容应包含：

export declare class UtilDatetime {
    static formatDate(date: string, format?: string): string;
}

若仍未生成，可手动执行tsc --emitDeclarationOnly生成声明文件，再执行Parcel构建。

（4）完善package.json配置

• 确保types字段指向正确的类型文件路径；
• 添加prepare脚本，确保npm安装时自动构建产物：

  "scripts": {
    "build": "parcel build",
    "prepare": "npm run build"
  }
  

  （私有库若未预提交dist目录，此步骤可避免安装后缺失构建文件）

3. 额外注意事项 #

• 若库设置了private: true，需确保Git权限正常，npm能完整拉取仓库内容；
• 避免将dist目录加入.gitignore（若依赖预构建产物安装），或通过prepare脚本在安装时自动构建。

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