React开发npm包时如何配置@前缀的包导入路径？

1. 修正本地tsconfig路径映射配置 #

你当前的paths配置仅匹配单独导入@initial的场景，无法匹配@initial/xxx的子路径导入，需要补充通配符规则：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"],
      "@initial": ["src/components"],
      "@initial/*": ["src/components/*"] // 新增该行匹配子路径
    }
  }
}

注意：确认tsconfig的include字段已经包含了所有src下的源码文件，否则路径映射也可能不生效。

2. 同步配置打包工具别名 #

tsconfig的paths仅负责TypeScript编译期的路径识别，你的项目打包工具（Vite/Rollup/Webpack等）需要单独配置别名才能正常解析路径，以Vite为例：

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@initial': path.resolve(__dirname, 'src/components')
    }
  }
})

其他打包工具参考官方文档配置别名规则即可。

3. 发布npm包的额外配置 #

如果要让安装你包的外部用户也能通过@initial/xxx格式导入，注意tsconfig的paths仅对当前项目生效，无法随包发布，需要做以下处理：

• 如果你的包本身就是作用域包，直接将package.json的name字段设置为@initial/package，发布到npm对应的@initial作用域下即可，用户安装后直接就能按示例导入。
• 如果需要让用户通过自定义别名导入，需要在包的README中告知用户在自己项目的tsconfig和打包工具中添加对应的别名配置，指向你包的对应路径。
• 确保打包时生成了完整的.d.ts类型声明文件，在package.json中配置类型入口：

{
  "types": "./dist/index.d.ts",
  "typesVersions": {
    "*": {
      "*": ["./dist/*.d.ts"]
    }
  }
}

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