如何配置自定义NPM包，实现无需src路径的组件导入？

我使用Material UI时，支持两种模块导入方式：

import { Box } from '@mui/material';
// 或者
import Box from '@mui/material/Box';

其项目结构简化后如下：

/mui-material
  | package.json
  | tsconfig.json
  / src
    | <components>
    | index.js

我自己开发了结构类似的个人NPM包@la27/utils，已发布到NPM源，但其他项目中仅能通过以下方式导入：

import { MyModule } from '@la27/utils';
// 或者
import MyModule from '@la27/utils/src/MyModule';

需要修改配置，实现无需携带src路径即可导入单个模块。

解决方案 #

1. 配置package.json的exports字段（推荐方案，符合ES模块规范） #

在包的package.json中添加exports字段，明确指定每个模块的导出路径，这样用户就能直接通过@la27/utils/MyModule导入目标模块：

{
  "name": "@la27/utils",
  "exports": {
    ".": "./src/index.js", // 对应整体导入：import { ... } from '@la27/utils'
    "./MyModule": "./src/MyModule.js" // 对应单模块导入：import MyModule from '@la27/utils/MyModule'
    // 多模块场景下，依次添加对应配置即可
  },
  // 其他原有配置项...
}

如果你的包基于TypeScript开发，需确保路径指向正确的TS源文件，或编译后的JS文件（根据项目需求选择）。

2. 构建时输出独立模块文件（适配生产环境） #

若包需要编译（如TS转JS），可在构建脚本中将每个模块单独输出到指定目录（如dist），再通过exports字段指向编译后的文件：

{
  "exports": {
    ".": "./dist/index.js",
    "./MyModule": "./dist/MyModule.js"
  },
  "scripts": {
    "build": "tsc --outDir dist" // 以TypeScript编译为例
  }
}

这种方式提供更好的兼容性，用户导入的是编译后的生产环境代码。

3. 可选：配置main/module字段（兼容旧导入方式） #

若需兼容传统导入逻辑，可补充设置main和module字段：

{
  "main": "./src/index.js",
  "module": "./src/index.js"
}

注意：该配置仅针对整体导入场景，单模块直接导入仍需依赖exports字段。

关键注意事项 #

• 确保发布到NPM的包包含src（或编译后的dist）目录，不要在.npmignore中忽略这些文件；
• TypeScript项目需在tsconfig.json中开启declaration: true，生成对应的.d.ts类型声明文件，为用户提供类型提示。

内容的提问来源于stack exchange，提问作者LA.27