如何为Node包指定文件夹作为入口点以简化组件导入路径

你可以通过以下几种方式满足需求，同时实现内部目录访问限制：

方案1：使用package.json的exports字段（推荐） #

exports是Node.js 12+及所有现代前端打包工具（Webpack 5+, Vite, Rollup 2+）原生支持的字段，可以精准控制包的暴露路径和映射规则，同时天然支持禁止内部路径访问。
在你的@our-package/core包的package.json中添加如下配置：

{
  "name": "@our-package/core",
  "version": "x.x.x",
  "exports": {
    // 把根路径下的所有导入映射到components目录
    "./*": "./components/*",
    // 禁止访问utils、hooks等内部目录
    "./utils/*": { "deny": true },
    "./hooks/*": { "deny": true }
  }
}

配置完成后，即可直接使用import '@our-package/core/MyComponent/MyComponent'的格式导入组件，尝试导入utils/hooks下的内容时打包工具会直接报错。

如果你的项目使用TypeScript，需要额外在package.json中加typesVersions配置保证类型提示正常：

{
  "typesVersions": {
    "*": {
      "*": ["./components/*"]
    }
  }
}

方案2：构建时调整输出目录结构 #

如果需要兼容不支持exports的旧打包工具（如Webpack 4），可以在组件库的构建脚本中调整输出规则：

• 构建时将components目录下的所有内容直接输出到包的根目录
• 将utils、hooks目录打包为内部私有chunk，不生成可单独导入的独立文件，或是统一放到命名明确的私有目录（如_internal）不对外暴露
  调整后最终发布的包结构如下，即可直接使用简化后的导入规则：

/core
  /MyComponent
  /_internal
    /utils
    /hooks

方案3：使用打包工具的别名配置（仅适配上层应用场景） #

如果暂时不想修改组件库的配置，也可以在使用组件库的React应用中配置打包别名，这种方式不会限制内部目录访问，仅做路径简化：
以Vite配置为例：

// vite.config.js
export default {
  resolve: {
    alias: {
      '@our-package/core': '@our-package/core/components'
    }
  }
}

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