发布ESM格式npm包时，如何配置导出以支持两种导入方式？

1. 修正导出代码 #

调整导出逻辑，确保命名导出和默认导出的类型都能被TypeScript正确识别，同时保持两种导入方式的兼容性：

export const convertCsvToWorkbook = () => {
  // 你的业务实现代码
};

export const createFlatfile = () => {
  // 你的业务实现代码
};

// 定义默认导出的对象，包含两个方法
const csvToFlatfile = {
  convertCsvToWorkbook,
  createFlatfile,
};

export default csvToFlatfile;

// 可选：为默认导出添加类型声明，让TS类型推断更明确
export type CsvToFlatfile = typeof csvToFlatfile;

2. 配置package.json #

确保package.json中的字段正确声明模块类型、入口文件和类型定义路径，让Node.js和TypeScript能正确识别模块结构：

{
  "name": "csvtoflatfile",
  "version": "1.0.0",
  "type": "module", // 明确声明为ESM模块
  "main": "./dist/index.js", // 兼容CommonJS环境的入口
  "module": "./dist/index.js", // ESM环境入口
  "types": "./dist/index.d.ts", // 类型定义文件路径
  "scripts": {
    "build": "tsc" // 编译脚本
  },
  // 其他依赖、描述字段...
}

3. 配置tsconfig.json #

调整TypeScript编译选项，确保生成符合ESM规范的代码和正确的类型定义文件：

{
  "compilerOptions": {
    "target": "ESNext", // 目标JS版本
    "module": "ESNext", // 生成ESM模块代码
    "moduleResolution": "NodeNext", // 匹配Node.js的模块解析逻辑
    "declaration": true, // 自动生成.d.ts类型文件
    "outDir": "./dist", // 编译输出目录
    "strict": true, // 开启严格类型检查（推荐）
    "esModuleInterop": true // 兼容CommonJS与ESM的互操作
  },
  "include": ["src/**/*"], // 源码目录，根据实际项目结构调整
  "exclude": ["node_modules", "dist"]
}

4. 验证编译结果 #

运行npm run build后，检查dist目录下的文件：

• index.js需保留ESM导出格式：

  export const convertCsvToWorkbook = () => {};
  export const createFlatfile = () => {};
  const csvToFlatfile = {
      convertCsvToWorkbook,
      createFlatfile,
  };
  export default csvToFlatfile;
  

• index.d.ts需包含完整的类型声明：

  export declare const convertCsvToWorkbook: () => void;
  export declare const createFlatfile: () => void;
  declare const csvToFlatfile: {
      convertCsvToWorkbook: () => void;
      createFlatfile: () => void;
  };
  export default csvToFlatfile;
  export type CsvToFlatfile = typeof csvToFlatfile;
  

5. 测试导入功能 #

发布到npm（或本地用npm link测试）后，两种导入方式均可正常工作：

命名导入 #

import { convertCsvToWorkbook, createFlatfile } from 'csvtoflatfile';

convertCsvToWorkbook(); // 无TypeScript错误，可正常执行
createFlatfile(); // 无TypeScript错误，可正常执行

默认导入 #

import csvtoflatfile from 'csvtoflatfile';

csvtoflatfile.convertCsvToWorkbook(); // 无TypeScript错误，可正常执行
csvtoflatfile.createFlatfile(); // 无TypeScript错误，可正常执行

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