基于Create React App TypeScript开发npm包遇Module Parse Failed错误求助

核心问题分析 #

你遇到的错误是因为构建后的npm包产物中仍包含未被转译的TypeScript语法，或者测试项目的Webpack（Create React App内置）无法识别包的入口文件及转译后的代码格式。具体原因包括：

• Babel配置未添加TypeScript预设，未将TS/TSX文件转译为JS
• package.json未正确配置包的入口路径与类型声明文件路径
• 未生成TypeScript类型声明文件，且未确保dist目录被包含在安装产物中

步骤1：完善Babel配置 #

1. 安装TypeScript预设依赖：

npm install @babel/preset-typescript --save-dev

2. 修改你的Babel配置文件（babel.config.json或.babelrc），添加@babel/preset-typescript预设：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

步骤2：配置package.json关键字段 #

在你的包项目的package.json中添加/修改以下字段，确保测试项目能正确识别包的入口：

{
  "main": "dist/index.js", // 指向转译后的JS入口
  "types": "dist/index.d.ts", // 指向类型声明文件
  "files": ["dist"], // 指定安装时要包含的目录
  "private": false // 确保包可以被外部安装
}

步骤3：生成TypeScript类型声明文件 #

修改包项目的tsconfig.json，开启类型声明生成：

{
  "compilerOptions": {
    // 保留原有配置，添加以下字段
    "declaration": true,
    "declarationDir": "./dist",
    "emitDeclarationOnly": true,
    "rootDir": "./src/lib" // 确保类型声明对应src/lib下的文件
  },
  "include": ["src/lib/**/*"]
}

步骤4：更新Build脚本 #

修改package.json中的build脚本，同时完成Babel转译与类型声明生成：

{
  "scripts": {
    "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files && tsc --emitDeclarationOnly"
  }
}

步骤5：重新构建并推送 #

1. 执行构建命令：

npm run build

2. 将包含dist目录的代码推送到GitHub分支

步骤6：重新安装测试 #

在测试项目中重新安装你的包：

npm install github_username/repo_name#branch_name

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