JavaScript模块是ES6起原生支持的代码组织方式，通过export导出（命名/默认）和import导入实现作用域隔离与复用，需配合type="module"或.mjs后缀使用，且import/export仅限顶层。

JavaScript模块是将代码组织成独立、可复用单元的方式，每个模块拥有自己的作用域，不会污染全局命名空间。从ES6（ECMAScript 2015）开始，原生支持import和export语法，成为现代前端开发的标准实践。

模块的基本导出方式

一个模块通过export向外提供变量、函数、类或对象。可以使用命名导出（named export）或默认导出（default export）：

• 命名导出：可导出多个值，导入时必须使用对应名称
  ✅ 正确写法：
  export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { ... }
• 默认导出：每个模块最多一个，默认导出不需要名称，导入时可自定义名称
  ✅ 正确写法：
  export default function greet(name) { return `Hello, ${name}`; }
  或 export default class App { ... }

模块的导入方式

使用import语句加载其他模块的功能，导入语法需与导出方式匹配：

• 导入命名导出：用大括号指定名称
  import { PI, add, Calculator } from './math.js';
  也可重命名：import { add as sum } from './math.js';
• 导入默认导出：不加花括号，名称可任意取
  import greet from './greeting.js';
  （注意：这里greet不是固定名，可写成import hello from './greeting.js'）
• 同时导入默认和命名导出：
  import greet, { PI, add } from './utils.js';
• 整体导入（namespace import）：把所有导出挂载到一个对象上
  import * as utils from './utils.js';
  使用：utils.PI、utils.add(2, 3)

模块使用的注意事项

模块系统依赖严格的语法和环境支持：

• 文件必须以.mjs后缀命名，或在标签中声明type="module"，否则浏览器会按传统脚本执行，不识别import/export
• 模块路径必须是相对路径（如'./file.js'）或绝对URL；不能省略扩展名或使用纯模块名（如'lodash'需构建工具支持）
• 模块代码自动运行在严格模式下，无需"use strict"
• import和export只能出现在模块顶层，不能放在if、函数或块级作用域中（动态导入可用import()函数实现）

常见问题与替代方案

开发中可能遇到模块未生效、报错“Cannot use import statement outside a module”等问题：

• 确保HTML中引入JS时加type="module"：
  
• Node.js中启用ES模块：在package.json中添加"type": "module"，或使用.mjs后缀
• 旧项目仍用CommonJS（require/module.exports）？可通过打包工具（如Webpack、Vite）混合处理，但建议新项目统一用ESM