如何创建支持直接导入子模块的npm包？无需/dist路径访问

问题描述 #

我想要创建一个npm包，使其支持直接导入子模块，例如使用const logger = require('server-package-poc/logger')的方式，和lodash、crypto-js的子模块导入逻辑一致。

当前包的入口文件代码如下：

// server-package-poc/index.ts
import greeter from "./greeter";
import logger from "./logger";

export { greeter, logger };

请问如何无需添加/dist路径就能访问logger、greeter等子模块？

解决方案 #

要实现这个功能，核心是利用npm的exports字段配置子路径映射，同时配合TypeScript的类型配置（如果用TS开发），具体步骤如下：

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

在package.json中添加exports字段，明确指定根模块和各个子模块的实际文件路径。即使编译后的文件放在dist目录，用户导入时也不需要写/dist：

{
  "name": "server-package-poc",
  "main": "./dist/index.js",
  "exports": {
    ".": "./dist/index.js",
    "./logger": "./dist/logger.js",
    "./greeter": "./dist/greeter.js"
  },
  // 保留其他原有字段（如scripts、dependencies等）
}

这里的路径要对应你编译后的文件位置，比如用TypeScript编译后输出到dist目录，就指向dist下的对应文件。

2. 确保子模块正确导出 #

每个子模块文件需要单独导出内容，比如：

// logger.ts
export default function logger(msg: string) {
  console.log(`[LOG] ${msg}`);
}

// greeter.ts
export default function greeter(name: string) {
  return `Hello, ${name}!`;
}

3. TypeScript配置优化（若使用TS） #

如果你的包用TypeScript开发，需要调整tsconfig.json保证类型文件正确生成和识别：

• 开启declaration: true，自动生成.d.ts类型文件
• 指定outDir: "./dist"，将编译后的js和d.ts文件统一输出到dist目录
• 在package.json中添加类型映射，让TypeScript识别子模块类型：

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

4. 测试导入 #

配置完成后，用户就能直接通过以下方式导入子模块：

• CommonJS方式：

const logger = require('server-package-poc/logger');
const greeter = require('server-package-poc/greeter');

• ES模块方式：

import logger from 'server-package-poc/logger';
import greeter from 'server-package-poc/greeter';

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