JS `ESM` in Node.js 深度：`package.json` `type` 字段与模块解析

各位观众老爷，大家好！我是你们的老朋友，Bug终结者。今天咱们来聊聊Node.js里的ESM，也就是ECMAScript Modules，以及那个关键的package.json里的type字段。

开场白：Node.js的模块化进化史

话说当年，Node.js刚出道的时候，用的还是CommonJS模块规范（也就是require和module.exports）。这CommonJS啊，就像个老实巴交的管家，虽然好用，但总觉得少了点现代感。

后来，ESM来了，带着箭头函数、async/await等等新特性，一下子就吸引了大家的目光。ESM就像个时尚达人，穿得光鲜亮丽，但Node.js一下子不知道该怎么接纳它了。

于是，package.json里的type字段就闪亮登场了，它就像个中间人，告诉Node.js：“嘿，这个项目里的模块是CommonJS还是ESM，你看着办！”

package.json里的type字段：模块类型的指挥棒

type字段只有两个可选值：

"commonjs"：默认值。如果package.json里没有type字段，或者type字段的值不是"module"，那Node.js就认为这个项目里的模块都是CommonJS格式的。
"module"：告诉Node.js，这个项目里的模块都是ESM格式的。

举个例子：

// package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module" // 重点！
}

有了这个"type": "module"，Node.js就会把项目里的.js文件都当作ESM来解析。

模块解析规则：Node.js的寻宝游戏

Node.js在解析模块的时候，会按照一套规则来查找模块文件。这个过程就像寻宝游戏，Node.js拿着藏宝图，一步一步地找到宝藏（也就是模块）。

相对路径和绝对路径：如果模块路径以./、../或/开头，Node.js就会直接按照这个路径去查找文件。这就像拿着藏宝图直接奔向目标地点。

// ESM
import { add } from './utils.js'; // 相对路径
import { logger } from '/path/to/logger.js'; // 绝对路径

// CommonJS
const { add } = require('./utils.js'); // 相对路径
const { logger } = require('/path/to/logger.js'); // 绝对路径

非裸露说明符：这指的是那些看起来像文件路径，但又不是以.或/开头的路径，比如utils、my-module等等。Node.js会把它们当作包名来处理。
- node_modules文件夹：Node.js会先在当前目录下的node_modules文件夹里查找，然后一层一层地往上找，直到找到根目录下的node_modules文件夹。这就像在不同的房间里找宝藏，先找最近的房间，再找远一点的房间。
- package.json里的exports字段：如果找到了包，Node.js会查看包的package.json文件里的exports字段，看看有没有指定模块的入口文件。这个exports字段就像藏宝图上的详细说明，告诉你宝藏的具体位置。
- package.json里的main字段：如果exports字段不存在，Node.js会查看main字段，main字段指定了包的默认入口文件。这就像藏宝图上的备用方案，告诉你宝藏的另一个可能位置。
- index.js、index.json、index.node：如果main字段也不存在，Node.js会尝试查找index.js、index.json或index.node文件。这就像藏宝图上的最后提示，告诉你宝藏可能藏在某个特殊的地方。

ESM和CommonJS的互操作：兼容性是王道

ESM和CommonJS就像两种不同的语言，它们之间需要一个翻译器才能互相交流。Node.js提供了一些机制来实现这种互操作。

ESM导入CommonJS模块：ESM可以直接导入CommonJS模块，Node.js会自动把CommonJS模块转换成ESM格式。
```
// ESM
import * as myCommonJSModule from './my-commonjs-module.js'; // 导入CommonJS模块

console.log(myCommonJSModule.myFunction());
```
注意：导入CommonJS模块时，需要使用import * as语法，因为CommonJS模块的导出是动态的，ESM无法静态地分析出CommonJS模块的导出。
CommonJS导入ESM模块：CommonJS不能直接导入ESM模块，需要使用import()函数。import()函数是一个动态导入函数，它会返回一个Promise，Promise resolve的结果就是ESM模块的导出。
```
// CommonJS
async function loadESM() {
  const myESMModule = await import('./my-esm-module.mjs'); // 导入ESM模块
  console.log(myESMModule.myFunction());
}

loadESM();
```
注意：CommonJS导入ESM模块时，需要使用async/await语法，因为import()函数是异步的。

.mjs和.cjs扩展名：明确模块类型的标签

为了更明确地指定模块类型，Node.js引入了.mjs和.cjs扩展名。

.mjs：表示这是一个ESM模块，无论package.json里的type字段是什么，Node.js都会把.mjs文件当作ESM来解析。
.cjs：表示这是一个CommonJS模块，无论package.json里的type字段是什么，Node.js都会把.cjs文件当作CommonJS来解析。

这就像给模块贴上了标签，告诉Node.js：“嘿，我是ESM！”或者“嘿，我是CommonJS！”

exports字段的进阶用法：更灵活的模块导出

exports字段不仅可以指定模块的入口文件，还可以指定模块的子模块，以及不同环境下的模块入口文件。

// package.json
{
  "name": "my-package",
  "version": "1.0.0",
  "exports": {
    ".": "./index.js", // 默认入口文件
    "./utils": "./lib/utils.js", // 子模块
    "./browser": { // 浏览器环境下的入口文件
      "browser": "./browser.js"
    }
  }
}

有了exports字段，我们可以更灵活地控制模块的导出，让模块在不同的环境下有不同的行为。

import.meta：ESM的专属信息

import.meta是一个ESM的专属对象，它包含了当前模块的信息，比如模块的URL、模块是否是main模块等等。

// ESM
console.log(import.meta.url); // 当前模块的URL
console.log(import.meta.main); // 是否是main模块

import.meta就像模块的身份证，告诉我们模块的身份信息。

ESM在Node.js中的最佳实践：避免踩坑指南

明确指定模块类型：在package.json里设置type字段，或者使用.mjs和.cjs扩展名，明确指定模块类型，避免Node.js猜错。
使用exports字段：使用exports字段来控制模块的导出，让模块更灵活。
注意ESM和CommonJS的互操作：了解ESM和CommonJS的互操作规则，避免出现兼容性问题。
使用import.meta：利用import.meta获取模块信息，方便调试和开发。
避免循环依赖：循环依赖会导致模块加载失败，尽量避免循环依赖。

一个完整的例子：ESM在Node.js中的实战

my-project/
├── package.json
├── index.js
├── utils.mjs
└── my-commonjs-module.cjs

// package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./utils": "./utils.mjs"
  }
}

// index.js (ESM)
import { add } from './utils.mjs';
import * as myCommonJSModule from './my-commonjs-module.cjs';

console.log(add(1, 2));
console.log(myCommonJSModule.multiply(3, 4));

// utils.mjs (ESM)
export function add(a, b) {
  return a + b;
}

// my-commonjs-module.cjs (CommonJS)
exports.multiply = function(a, b) {
  return a * b;
};

在这个例子中，我们使用了"type": "module"来指定项目里的模块都是ESM格式的，然后使用.mjs扩展名来明确指定utils.mjs是一个ESM模块，使用.cjs扩展名来明确指定my-commonjs-module.cjs是一个CommonJS模块。

总结：拥抱ESM，迎接Node.js的未来

ESM是Node.js的未来，它带来了更现代、更高效的模块化方案。虽然ESM的学习曲线比较陡峭，但只要掌握了package.json里的type字段、模块解析规则、ESM和CommonJS的互操作等知识点，就能轻松驾驭ESM，迎接Node.js的未来。

好了，今天的讲座就到这里。希望大家能够喜欢，如果有什么问题，欢迎留言提问。我们下次再见！

发表回复 取消回复

发表回复取消回复