深入理解ESM：在Node.js和浏览器中运行模块化JavaScript代码

随着JavaScript的发展，模块化成为了一种必要的代码组织方式。ECMAScript模块（ESM）提供了一种标准化的模块系统，允许开发者在JavaScript中导入和导出函数、对象或值。本文将指导你如何在Node.js和浏览器环境中运行ESM代码，帮助你更好地理解和应用模块化编程。

一、Node.js中的ESM

从Node.js 12.0版本开始，Node.js开始支持ESM。在Node.js中运行ESM代码需要一些配置步骤。

1. 文件扩展名

首先，你需要将你的JavaScript文件扩展名从.js改为.mjs，以告诉Node.js这是一个ESM模块。

2. 使用import和export语法

你可以在.mjs文件中使用import和export语法来导入和导出模块。例如：

// math.mjs
export function add(a, b) {
    return a + b;
}
// main.mjs
import { add } from './math.mjs';
console.log(add(1, 2)); // 输出 3

3. 运行代码

在命令行中，你可以使用node命令来运行.mjs文件：

node main.mjs

二、浏览器中的ESM

在浏览器中运行ESM代码需要一些不同的步骤，因为浏览器有自己的模块加载机制。

1. 使用<script type="module">标签

在HTML文件中，你可以使用<script type="module">标签来加载ESM模块。例如：

<!-- index.html -->
<script type="module">
    import { add } from './math.js';
    console.log(add(1, 2)); // 输出 3
</script>

注意，这里的模块文件math.js不需要改变扩展名，因为浏览器通过type="module"属性来识别ESM模块。

2. 使用import和export语法

和Node.js中一样，你可以在ESM模块中使用import和export语法。例如：

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

3. 服务器环境

由于浏览器的同源策略，你需要通过一个服务器来提供模块文件，而不能直接通过file://协议打开HTML文件。你可以使用如http-server、express等简单的服务器来提供文件。

三、总结

通过本文，你应该了解了如何在Node.js和浏览器中运行ESM代码。ESM提供了一种标准化的模块系统，使得JavaScript代码更加易于组织和管理。在实际开发中，你可以根据项目的需求和环境来选择适合的模块系统。希望这篇文章能帮助你更好地理解和应用ESM。