构建工具加载npm包中的不同模块格式

可以在package.json 中的模块配置字段，告诉 Node.js、浏览器、打包工具（如 Webpack、Vite）或 TypeScript 如何正确识别、加载你的 npm 包，解决了不同模块规范（CommonJS/ES Module）、不同环境下的 “入口文件” 和 “类型定义” 匹配问题。

1. 基础字段：直接指定单一入口

main、module、types是早期模块配置的 “简化版”，直接为特定场景指定入口，兼容性更广。

 

字段名	作用	适用场景
main	指定 CommonJS 规范的入口文件	1. Node.js 环境（默认用 require() 加载模块） 2. 不支持 exports 字段的旧版打包工具（如 Webpack 4 及更早）
module	指定 ES Module 规范的入口文件	1. 现代打包工具（Webpack 5、Vite、Rollup） 2. 支持 import 的浏览器环境 → 核心目的：实现 “Tree Shaking”（剔除未使用代码，减小打包体积）
types	指定 TypeScript 类型定义文件	1. TypeScript 项目中引入你的包时，提供类型提示（如参数类型、返回值类型） 2. 编辑器（VS Code）自动识别类型，实现代码补全、错误检查

2.更高级的配置方式：指定exports

exports 字段是 Node.js v12+ 推出的更灵活、更精确的配置方式，能根据 “加载方式”（import/require）、“环境”（浏览器 / Node.js）等条件，返回不同的入口文件，彻底替代了早期 main/module 的 “单一入口” 局限性。

"exports": {
  ".": { // 表示“当用户导入包的根目录时”（如 import xxx from "你的包名"）
    "import": "./dist/index.es.js",  // 若用户用 ES Module 的 import 加载 → 用这个文件
    "require": "./dist/index.cjs.js", // 若用户用 CommonJS 的 require 加载 → 用这个文件
    "types": "./dist/index.d.ts"     // 若用户用 TypeScript → 用这个类型文件
  }，
  //按需加载css
  "./style": "./dist/style.css"
}

为什么有的包同时配置 main/module 和 exports？

是为了兼容性：

• 现代环境（Node.js 12+、Webpack 5+）会优先读取 exports，按条件加载文件；
• 旧环境（Node.js 10-、Webpack 4-）不认识 exports，会降级读取 main（CommonJS）和 module（ES Module），确保包在新旧环境下都能正常使用。

总结：这些配置的最终效果

假设你发布了一个叫 my-utils 的 npm 包，用户在不同场景下引入时：