JS `ES Modules` 在浏览器与 Node.js 中的兼容性与差异

各位观众老爷们，大家好！我是今天的主讲人，咱们今天聊聊这让人又爱又恨的ES Modules，以及它在浏览器和Node.js这对欢喜冤家里的表现。

开场白：ES Modules，你搞清楚了吗？

ES Modules（简称ESM）是JavaScript官方提供的模块化方案。在这之前，JavaScript社区涌现了各种模块化标准，比如CommonJS（Node.js）、AMD（RequireJS）和UMD，简直让人眼花缭乱。ESM的出现，就是为了统一江湖，让JavaScript模块化有一个官方认可的、更标准化的姿势。

ESM的优点：

标准性： 官方标准，血统纯正，避免了各种社区标准的兼容性问题。
静态分析： ESM支持静态分析，可以在编译时确定模块之间的依赖关系，这对于代码优化、tree shaking（移除未使用的代码）等非常有帮助。
异步加载： 在浏览器环境中，ESM天然支持异步加载，可以提高页面加载速度。
循环引用： ESM可以更好地处理循环引用，不会像CommonJS那样容易出现未定义变量的问题。

第一部分：浏览器中的ES Modules

在浏览器中，使用ES Modules主要通过<script type="module">标签引入。

1. 基本用法：

<!DOCTYPE html>
<html>
<head>
  <title>ES Modules in Browser</title>
</head>
<body>
  <script type="module">
    import { add } from './math.js'; // 引入math.js中的add函数

    console.log(add(5, 3)); // 输出 8
  </script>
</body>
</html>

其中math.js文件内容如下：

// math.js
export function add(a, b) {
  return a + b;
}

注意点：

type="module"： 必须在<script>标签中指定type="module"，浏览器才会将其识别为ES Module。
CORS： 如果你的模块文件位于不同的域名下，需要配置CORS（跨域资源共享），否则浏览器会拒绝加载。
文件扩展名： 浏览器通常要求模块文件带有.js扩展名。
模块作用域： 每个ES Module都有自己的作用域，不会污染全局作用域。
顶层await： ESM允许在模块的顶层使用await，这使得异步操作更加方便。

2. 导入导出方式：

ESM支持两种主要的导入导出方式：命名导出（named exports）和默认导出（default exports）。

命名导出：

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

导入：

import { add, subtract } from './math.js';

console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2

默认导出：

// math.js
export default function add(a, b) {
  return a + b;
}

导入：

import add from './math.js';

console.log(add(5, 3)); // 输出 8

可以混合使用命名导出和默认导出：

// math.js
export function subtract(a, b) {
  return a - b;
}

export default function add(a, b) {
  return a + b;
}

导入：

import add, { subtract } from './math.js';

console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2

3. 动态导入（Dynamic Import）：

ESM还支持动态导入，允许你在运行时按需加载模块。

async function loadModule() {
  const { add } = await import('./math.js');
  console.log(add(5, 3)); // 输出 8
}

loadModule();

动态导入的优点：

按需加载： 可以根据需要加载模块，减少初始加载时间。
代码分割： 可以将代码分割成更小的模块，提高代码的可维护性。
条件加载： 可以根据条件加载不同的模块。

4. 模块路径：

在浏览器中，模块路径可以是相对路径或绝对路径。

相对路径： 相对于当前模块文件的路径。例如：./math.js、../utils/helper.js。
绝对路径： 相对于网站根目录的路径。例如：/js/math.js。

需要注意的是，浏览器不支持直接导入Node.js模块，例如fs、path等。

第二部分：Node.js中的ES Modules

Node.js从v12版本开始正式支持ES Modules。

1. 启用ES Modules：

在Node.js中启用ES Modules有两种方式：

.mjs扩展名： 将文件扩展名改为.mjs。
package.json： 在package.json文件中添加"type": "module"。

使用.mjs扩展名：

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

// index.mjs
import { add } from './math.mjs';

console.log(add(5, 3)); // 输出 8

运行：

node index.mjs

使用package.json：

// package.json
{
  "name": "es-modules-example",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js"
}

// math.js
export function add(a, b) {
  return a + b;
}

// index.js
import { add } from './math.js';

console.log(add(5, 3)); // 输出 8

运行：

node index.js

2. 导入导出方式：

Node.js中的ES Modules导入导出方式与浏览器基本相同，支持命名导出和默认导出。

3. 模块路径：

在Node.js中，模块路径可以是相对路径、绝对路径或模块名称。

相对路径： 相对于当前模块文件的路径。例如：./math.js、../utils/helper.js。
绝对路径： 文件系统的绝对路径。例如：/path/to/math.js。
模块名称： 从node_modules目录中查找模块。例如：import lodash from 'lodash';

注意点：

文件扩展名： 在导入本地模块时，必须指定文件扩展名（例如.js、.mjs）。
node_modules： Node.js会从node_modules目录中查找模块。
顶层await： 与浏览器一样，Node.js也支持顶层await。

4. 与CommonJS的互操作性：

Node.js允许ES Modules和CommonJS模块相互导入。

ESM导入CommonJS：

// common.cjs
module.exports = {
  multiply: function(a, b) {
    return a * b;
  }
};

// index.mjs
import common from './common.cjs';

console.log(common.multiply(5, 3)); // 输出 15

CommonJS导入ESM：

由于CommonJS是同步加载，而ESM是异步加载，因此CommonJS无法直接导入ESM。需要使用import()函数进行动态导入。

// esm.mjs
export function divide(a, b) {
  return a / b;
}

// index.cjs
async function loadModule() {
  const { divide } = await import('./esm.mjs');
  console.log(divide(15, 3)); // 输出 5
}

loadModule();

第三部分：浏览器与Node.js的差异

虽然ES Modules在浏览器和Node.js中具有相似的语法和功能，但仍然存在一些重要的差异。

特性	浏览器	Node.js
模块加载	通过`<script type="module">`标签或动态导入	通过`import`语句或动态导入
文件扩展名	通常要求`.js`扩展名	要求指定文件扩展名（例如`.js`、`.mjs`）
模块路径	相对路径或绝对路径	相对路径、绝对路径或模块名称
内置模块	不支持Node.js内置模块（例如`fs`、`path`）	支持Node.js内置模块
CORS	需要配置CORS才能加载跨域模块	无需CORS
模块解析策略	浏览器有自己的模块解析策略，通常依赖于URL	Node.js使用Node.js模块解析算法，从`node_modules`目录中查找模块
环境变量	无法直接访问Node.js环境变量（`process.env`）	可以访问Node.js环境变量（`process.env`）
全局对象	`window`	`global`

更详细的解释：

模块加载方式：
- 浏览器： 浏览器主要通过<script type="module">标签在HTML文件中声明ESM模块。此外，还可以使用import()函数进行动态导入。
- Node.js： Node.js使用import语句在JavaScript文件中声明ESM模块。同样，也支持import()函数进行动态导入。
文件扩展名：
- 浏览器： 浏览器通常要求ESM模块的文件扩展名为.js。虽然有些构建工具可以配置不带扩展名的导入，但浏览器本身还是更倾向于使用.js。
- Node.js： Node.js需要明确指定文件扩展名，例如.js或.mjs。如果package.json中设置了"type": "module"，则可以省略.js扩展名。但是为了代码的可读性和避免歧义，建议始终指定扩展名。
模块路径解析：
- 浏览器： 浏览器根据URL解析模块路径。相对路径是相对于当前HTML文件的路径，绝对路径是相对于网站根目录的路径。
- Node.js： Node.js使用一套复杂的模块解析算法。它会首先查找内置模块，然后查找当前目录下的node_modules目录，接着向上级目录查找，直到找到根目录为止。
内置模块：
- 浏览器： 浏览器无法直接访问Node.js的内置模块，例如fs（文件系统）、path（路径处理）等。这些模块是Node.js特有的，用于与操作系统进行交互。
- Node.js： Node.js可以访问所有内置模块。
CORS：
- 浏览器： 如果尝试从不同的域名加载ESM模块，浏览器会进行CORS（跨域资源共享）检查。如果服务器没有正确配置CORS头部，浏览器会阻止加载。
- Node.js： Node.js不存在CORS问题，因为它是在服务器端运行的。
全局对象：
- 浏览器： 浏览器中的全局对象是window。
- Node.js： Node.js中的全局对象是global。

第四部分：实际应用中的注意事项

构建工具：

在实际开发中，很少直接在浏览器中使用ESM。通常会使用构建工具（例如Webpack、Rollup、Parcel）将ESM模块打包成浏览器可以识别的格式，并进行代码优化、tree shaking等操作。
兼容性：

尽管ES Modules已经得到了广泛支持，但仍然需要考虑旧版本浏览器的兼容性。可以使用Babel等工具将ESM代码转换为ES5代码，以兼容旧版本浏览器。
测试：

编写单元测试和集成测试是保证代码质量的重要手段。可以使用Jest、Mocha等测试框架来测试ESM模块。
TypeScript：

TypeScript对ES Modules提供了良好的支持。可以使用TypeScript编写ESM模块，并将其编译成JavaScript代码。

总结：

ES Modules是JavaScript模块化的未来。虽然在浏览器和Node.js中存在一些差异，但理解这些差异可以帮助我们更好地使用ES Modules，编写更模块化、更可维护的代码。

结束语：

好了，今天的讲座就到这里。希望大家对ES Modules有了更深入的了解。如果有什么问题，欢迎提问！谢谢大家！

发表回复 取消回复

发表回复取消回复