如何让自己的npm包同时支持ES5的require和ES6的import导入方式？

无需重构你原有ES5风格的业务代码，按照以下步骤调整即可：

1. 调整package.json核心配置 #

保留原有支持CommonJS的配置，新增ES Module兼容声明：

{
  "name": "smiley-id",
  "version": "你的当前版本号",
  "main": "index.js", // 原有CommonJS入口，保留不变
  "type": "commonjs", // 声明根目录下.js文件默认按CommonJS解析
  "exports": {
    ".": {
      "require": "./index.js", // CommonJS环境的导入入口
      "import": "./index.mjs" // ES Module环境的导入入口
    }
  }
}

2. 新增ES Module桥接文件 #

在项目根目录新建index.mjs桥接文件，不需要修改原有index.js的代码，内容如下：

// 引入原有CommonJS模块的导出内容
import cjsExports from './index.js'

// 支持默认导入 import smiley from 'smiley-id'
export default cjsExports

// 支持命名导入 import { smileyId } from 'smiley-id'
export const smileyId = cjsExports

3. 可选：适配TypeScript项目导入 #

如果需要支持TS项目的类型提示，可新增index.d.ts类型声明文件：

// 替换成你实际的函数/变量类型定义
declare const smiley: () => string

export default smiley
export const smileyId: typeof smiley

同时在package.json中新增"types": "index.d.ts"字段即可。

4. 发布前验证 #

本地新建测试项目，确认三种导入方式都能正常调用：

// 原有CommonJS导入逻辑不变
const smiley = require('smiley-id')
// ES Module默认导入
import smiley from 'smiley-id'
// ES Module命名导入
import { smileyId } from 'smiley-id'

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