如何实现npm库嵌套包的直接导入（无需lib路径）

完全可以实现你想要的import { button } from 'my-library/foo'导入方式，而且不需要把编译产物输出到根目录，只需要通过配置package.json就能搞定，跟你参考的lodash、React Native Vector Icons逻辑一致。

具体步骤： #

1. 确保源码与编译产物的结构对应 #

首先确认你的Babel编译配置是把src目录下的文件编译到lib目录，保持结构一致：

• src/foo/ → 编译后输出到lib/foo/
• src/bar/ → 编译后输出到lib/bar/

同时要保证每个子模块的index.js正确导出button，比如src/foo/index.js里应该有：

// 假设button.js是默认导出，根据你的实际代码调整
export { default as button } from './button';

2. 配置package.json的exports字段 #

在package.json里添加exports字段，定义子路径到编译产物的映射：

{
  "name": "my-library",
  // ...其他字段
  "exports": {
    "./foo": "./lib/foo/index.js",
    "./bar": "./lib/bar/index.js"
  }
}

这个字段是npm规范里的子路径导出配置，当用户写import { button } from 'my-library/foo'时，会自动映射到my-library/lib/foo/index.js。

3. 兼容旧环境（可选） #

如果需要兼容不支持exports字段的旧版Node.js或打包工具，可以额外配置main（CommonJS入口）和module（ES模块入口）字段，同时在根目录下创建foo.js、bar.js作为转发文件（不推荐，会污染根目录，优先用exports）：
比如根目录下的foo.js内容：

module.exports = require('./lib/foo');

为什么你现在只能用my-library/lib/foo？ #

因为你没有配置子路径导出规则，默认情况下，打包工具只能识别package.json里main字段指定的入口，或者让用户手动写完整的相对路径到lib目录下的文件。通过上面的exports配置，就能把简洁的子路径映射到正确的编译产物位置。

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