JS包发布者能否将package.json入口指向模块相对目录？

你提到的这种按需导入子模块的方式，完全不是冷门或不良实践——比如你举例的Lodash，还有React Icons、Material-UI的部分子包，都是这么设计的。下面详细拆解一下：

为什么这能正常工作？ #

Node.js和主流打包器（Webpack、Rollup、Vite等）的模块解析逻辑天然支持这种路径导入：当用户写import Button from 'react-patterns/Button'时，解析器会自动根据你package.json里的main/browser字段，找到对应的目录（Node.js用转译后的dist/components，浏览器/打包器用源码components），然后查找Button.js（或.jsx、.cjs等符合扩展名规则的文件）。只要目录结构和文件命名保持一致，就能完美实现这种导入方式。

配置与目录结构示例 #

你的package.json配置是没问题的，搭配清晰的目录结构就能生效：

{
  "name": "react-patterns",
  "version": "0.0.1",
  "main": "dist/components", // Node.js环境用转译后的产物目录
  "browser": "components",   // 浏览器/打包器环境用源码目录
  "type": "module" // 如果你的包采用ES模块语法，记得加上这个字段
}

对应的项目目录结构：

react-patterns/
├── components/          # 源码目录
│   ├── Button.jsx
│   └── Image.jsx
├── dist/
│   └── components/      # 转译后的产物目录
│       ├── Button.js
│       └── Image.js
└── package.json

用户就能像你期望的那样按需导入：

import Button from 'react-patterns/Button';
import Image from 'react-patterns/Image';

需要注意的细节 #

• 目录结构一致性：确保转译后的dist/components和源码components的文件结构完全对应，转译脚本（比如Babel、ESBuild）要保留子目录和文件名，避免出现找不到文件的情况。
• 类型支持（若用TypeScript）：如果你的包提供类型定义，需要在package.json中配置types字段，或者在每个组件文件旁添加对应的.d.ts文件，确保用户导入时能获得类型提示。
• 现代模块解析优化：如果想更精确控制不同环境的导入路径（比如区分ES模块/CommonJS、浏览器/Node.js），可以使用package.json的exports字段——这是更规范的现代方案，示例如下：

{
  "exports": {
    ".": "./dist/components/index.js",
    "./Button": "./dist/components/Button.js",
    "./Image": "./dist/components/Image.js",
    "./Button/browser": "./components/Button.jsx",
    "./Image/browser": "./components/Image.jsx"
  }
}

这个字段能明确指定每个子路径的导入目标，避免解析歧义。

这是不是不良实践？ #

完全不是！这种模式的优势很突出：

• 让用户按需导入，减少不必要的代码体积；
• 比import { Button } from 'react-patterns'的解构导入更直观，用户能清晰看到自己引入的模块；
• 对Tree Shaking友好，打包器可以更精准地剔除未使用的代码。

很多成熟的库都在使用这种模式，所以你不用担心这是不规范的做法。

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