使用@vercel/ncc编译项目包遇问题，求解决方案

很多开发者会在工具类项目、Vercel生态项目里用@vercel/ncc打包成单文件，下面针对你遇到的问题给出具体解决办法：

1. TypeScript错误：tsconfig.json的"files"列表为空 #

ncc依赖tsconfig配置识别编译文件，空"files"字段会导致它找不到编译入口，可通过两种方式修复：

• 直接在"files"中指定入口文件：

{
  "compilerOptions": { /* 你的编译配置 */ },
  "files": ["src/index.ts", "src/client/testComponent.tsx"]
}

• 改用"include"字段批量匹配文件（更适合多文件项目）：

{
  "compilerOptions": { /* 你的编译配置 */ },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js"]
}

2. JSX编译错误：需要额外加载器 #

ncc默认支持JSX编译，但需确保tsconfig正确配置JSX选项：

• 在compilerOptions中添加：

"jsx": "react-jsx" // 或"react"，根据React版本选择

• 若JSX文件为.jsx后缀，编译时需显式指定扩展名：

ncc build src/index.ts --ext .jsx

如果用Preact这类非React框架，需在项目根目录添加.babelrc配置JSX转换规则：

{
  "presets": [["@babel/preset-react", { "pragma": "h", "pragmaFrag": "Fragment" }]]
}

项目结构参考 #

你的项目结构是典型的monorepo子包结构，无问题：

packages/
   packageA/
      node_modules/
      package.json
      tsconfig.json
      src/
         index.ts
         client/
           testComponent.tsx
         server/
           index.js
      dist/

编译后更新包引用路径 #

要将@package/xyz这类内部包引用改为./compiled/xyz，可采用以下方式：

方式1：批量替换工具 #

用replace-in-file批量修改编译后的文件，先安装依赖：

npm install replace-in-file --save-dev

在package.json中添加脚本：

"scripts": {
  "postbuild": "replace-in-file 'import ABC from \"@package/xyz\"' 'import ABC from \"./compiled/xyz\"' dist/**/*.js"
}

执行npm run build后会自动完成引用替换。

方式2：编译前配置路径映射 #

在tsconfig.json中配置paths和baseUrl，让编译时自动生成相对路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@package/xyz": ["./src/compiled/xyz"] // 指向编译后目标路径的源文件位置
    }
  }
}

配合ncc编译时，会根据路径映射自动转换引用路径。

方式3：自定义Node脚本 #

若需要更灵活的替换逻辑，可编写简单Node脚本遍历dist目录下的文件，替换指定引用字符串。

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