Parcel打包含Typescript module augmentation的库时扩展属性丢失如何解决

你遇到的问题核心是Parcel默认的类型生成逻辑会将未被显式引用的模块扩展声明丢弃，且你当前的配置也存在TS识别的问题，按以下步骤修复即可：

步骤1：修正基础配置 #

• 把package.json中的source字段改为实际的TS入口文件，比如"source": "src/index.ts"，你当前配置的是js后缀，Parcel无法正确处理TS类型。
• 项目根目录新增tsconfig.json，配置参考：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "declaration": true,
    "declarationDir": "dist",
    "emitDeclarationOnly": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

步骤2：调整构建逻辑 #

Parcel自动生成类型的能力对模块增强场景支持不完善，建议拆分JS打包和类型生成流程，修改package.json的scripts字段：

{
  "scripts": {
    "build:js": "parcel build",
    "build:types": "tsc",
    "build": "npm run build:types && npm run build:js"
  }
}

后续执行npm run build即可，先由tsc生成完整的类型声明，再用Parcel打包JS产物，避免扩展声明被丢弃。

步骤3：确保扩展声明被纳入编译 #

• 写有模块扩展的TS文件必须被入口文件index.ts显式导入，比如扩展写在src/augment.ts，就在index.ts中添加import './augment.ts'，避免声明被Tree Shaking移除。
• 如果生成的类型文件仍缺失扩展声明，在扩展代码所在文件的末尾添加export {}，让TS将该文件识别为模块，避免声明被忽略。

验证效果 #

构建完成后打开dist/types.d.ts，确认存在你写的declare module '@mui/material/styles'相关代码即可。下游项目导入你的库时，TS会自动合并类型，就能正常识别你扩展的属性。

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