各位靓仔靓女们，晚上好！我是今晚的讲师，大家可以叫我老王。今天咱们不聊风花雪月，就来掰扯掰扯 JavaScript 的 ESM 和 package.json 里的 exports 字段，争取让大家听完之后，腰不酸了，腿不疼了，ESM 用起来也更顺手了。
开场白：ESM，你的甜蜜小棉袄？
话说当年，JavaScript 这孩子刚出生的时候，那叫一个野蛮生长，模块化？不存在的！大家都是全局变量满天飞，稍微大一点的项目，就跟 spaghetti 代码一样，乱成一锅粥。后来，CommonJS 出现了，Node.js 率先拥抱，总算有了点模块化的样子。但是，CommonJS 也有它的局限性，比如只能在运行时确定模块依赖关系，无法进行静态分析优化。
这时候，ESM（ECMAScript Modules）横空出世，它可是 JavaScript 官方钦定的模块化标准，解决了 CommonJS 的一些痛点，比如可以在编译时确定模块依赖关系，方便进行 tree-shaking 等优化。
ESM 的语法也更简洁明了：
- 使用
import导入模块 - 使用
export导出模块
跟 CommonJS 的 require 和 module.exports 相比，ESM 看起来更像是 JavaScript 的“亲儿子”，用起来也更“优雅”。
package.json 的 exports 字段：守门员还是百宝箱？
好了，有了 ESM，咱们就可以愉快地编写模块化的 JavaScript 代码了。但是，问题又来了：
- 我的模块里面有很多文件，我只想暴露一部分 API 给用户，其他的都是内部实现，不想让用户随便访问，怎么办？
- 我的模块既支持 ESM，又支持 CommonJS，我怎么告诉 Node.js，它应该用哪个规范来加载我的模块？
- 我想要为不同的环境提供不同的模块实现，比如浏览器环境和 Node.js 环境，怎么办？
这时候，package.json 里的 exports 字段就该登场了。它可以说是模块的“守门员”，也可以说是模块的“百宝箱”，它可以控制哪些文件可以被外部访问，可以指定模块的入口文件，还可以根据不同的条件提供不同的模块实现。
exports 字段的基本用法：简单粗暴，一目了然
最简单的用法，就是指定模块的入口文件：
{
"name": "my-module",
"version": "1.0.0",
"exports": "./index.js"
}这样，当用户 import 或 require 你的模块时，实际上就是导入 index.js 文件。
如果你的模块有很多文件，但你只想暴露 index.js 和 utils.js 两个文件，可以这样写：
{
"name": "my-module",
"version": "1.0.0",
"exports": {
".": "./index.js",
"./utils": "./utils.js"
}
}这样，用户就可以这样导入：
import * as main from 'my-module'; // 导入 index.js
import * as utils from 'my-module/utils'; // 导入 utils.js但是，如果用户尝试导入其他文件，比如 my-module/internal.js，就会报错，因为 exports 字段没有允许访问 internal.js 文件。
exports 字段的高级用法：花样百出，惊喜不断
exports 字段还有很多高级用法，可以让你更加灵活地控制模块的导出行为。
-
条件导出：针对不同环境提供不同的实现
有时候，我们需要根据不同的环境（比如 Node.js 环境和浏览器环境）提供不同的模块实现。
exports字段支持条件导出，可以根据不同的条件选择不同的入口文件。{ "name": "my-module", "version": "1.0.0", "exports": { ".": { "browser": "./browser.js", "node": "./node.js", "default": "./index.js" } } }在这个例子中，如果是在浏览器环境中使用，就会导入
browser.js文件；如果是在 Node.js 环境中使用，就会导入node.js文件；如果在其他环境中，就会导入index.js文件。常用的条件包括：
browser: 浏览器环境node: Node.js 环境default: 默认环境
-
子路径导出：更精细的控制
除了指定整个模块的入口文件，还可以指定模块的子路径的入口文件。
{ "name": "my-module", "version": "1.0.0", "exports": { "./utils": "./utils.js", "./constants": { "browser": "./constants.browser.js", "node": "./constants.node.js" } } }在这个例子中，
my-module/utils总是会导入utils.js文件，而my-module/constants会根据不同的环境导入不同的文件。 -
import和require区分导出：ESM 和 CommonJS 的完美兼容有时候，我们希望为 ESM 和 CommonJS 提供不同的导出方式。
exports字段也支持区分import和require。{ "name": "my-module", "version": "1.0.0", "type": "module", "exports": { ".": { "import": "./index.mjs", "require": "./index.cjs" } } }在这个例子中，如果使用
import导入，就会导入index.mjs文件（ESM 格式）；如果使用require导入，就会导入index.cjs文件（CommonJS 格式）。注意： 要使用
import和require区分导出，需要在package.json中设置"type": "module"，表示这是一个 ESM 模块。 -
模式匹配导出：灵活应对各种场景
exports还支持使用模式匹配进行导出，这在某些情况下可以简化配置。使用*通配符可以匹配任何字符串。{ "name": "my-module", "version": "1.0.0", "exports": { "./features/*": "./src/features/*.js", "./styles/*": "./dist/styles/*.css" } }在这个例子中，任何以
./features/开头的导入都会被映射到./src/features/目录下的对应文件，例如import featureA from 'my-module/features/featureA'会导入./src/features/featureA.js。 同理，import styles from 'my-module/styles/main'会导入./dist/styles/main.css。 -
default条件的特殊性
default条件是兜底选项，任何未被其他条件匹配到的情况都会使用default指定的路径。{ "name": "my-module", "version": "1.0.0", "exports": { ".": { "node": "./index.node.js", "default": "./index.js" } } }在这个例子中，只有在 Node.js 环境下才会使用
index.node.js，其他任何环境都会使用index.js。
exports 字段的优先级：谁说了算？
当 exports 字段和 main 字段同时存在时，它们的优先级是怎样的呢？
- 如果
package.json中设置了"type": "module"，那么exports字段的优先级高于main字段。也就是说，Node.js 会优先使用exports字段来确定模块的入口文件。 - 如果
package.json中没有设置"type": "module"，那么main字段的优先级高于exports字段。也就是说，Node.js 会优先使用main字段来确定模块的入口文件。
exports 字段的注意事项：小心驶得万年船
在使用 exports 字段时，需要注意以下几点：
exports字段必须是一个对象。exports字段的键必须以.开头，表示模块的子路径。exports字段的值可以是字符串，也可以是对象。- 如果
exports字段的值是字符串，表示模块的入口文件。 - 如果
exports字段的值是对象，表示条件导出。 exports字段可以防止用户访问模块内部的私有文件。exports字段可以提高模块的安全性。
exports 字段的最佳实践：让你的模块更加健壮
- 尽可能使用
exports字段来控制模块的导出行为。 - 为不同的环境提供不同的模块实现。
- 使用条件导出，让你的模块更加灵活。
- 使用子路径导出，更精细地控制模块的导出行为。
- 使用模式匹配导出，简化配置。
- 仔细阅读 Node.js 官方文档，了解
exports字段的更多用法。
一个更完整的例子：
假设我们有一个名为 my-library 的库，它包含以下文件：
index.js: 主入口文件，同时兼容 ESM 和 CommonJS。utils.js: 一些工具函数。browser.js: 浏览器环境下的特殊实现。node.js: Node.js 环境下的特殊实现。internal.js: 内部使用的文件，不应该被外部访问。style.css: 样式文件
我们的 package.json 文件可以这样配置：
{
"name": "my-library",
"version": "1.0.0",
"description": "A versatile JavaScript library",
"type": "module",
"exports": {
".": {
"import": "./index.js",
"require": "./index.js",
"browser": "./browser.js",
"node": "./node.js",
"default": "./index.js"
},
"./utils": "./utils.js",
"./style": "./style.css",
"./features/*": "./src/features/*.js"
},
"files": [
"index.js",
"utils.js",
"browser.js",
"node.js",
"style.css",
"src/features"
],
"keywords": [
"javascript",
"library",
"esm",
"commonjs"
],
"author": "Your Name",
"license": "MIT"
}这个配置的含义是：
".": 主入口，同时支持 ESM 和 CommonJS，并根据环境选择browser.js或node.js，默认使用index.js。"./utils": 允许导入utils.js文件。"./style": 允许导入style.css文件。./features/*: 允许导入src/features目录下的文件。
总结：exports 字段，你的模块化利器
exports 字段是 package.json 中一个非常强大的字段，它可以让你更加灵活地控制模块的导出行为，提高模块的安全性，让你的模块更加健壮。掌握 exports 字段的用法，可以让你在模块化开发的道路上走得更远。
好了，今天的讲座就到这里。希望大家能够掌握 exports 字段的用法，并在实际项目中灵活运用。下次有机会再跟大家分享其他的技术知识。感谢大家的聆听！
（鞠躬，下台）