JavaScript模块导入导出方法全解析

大家好，今天本人给大家带来文章《JavaScript模块导入导出语法详解》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

JavaScript模块语法核心是ES6的export/import，支持命名导出、默认导出及混合导入；需顶层使用，路径带扩展名，环境须支持ESM，与CommonJS不兼容。

JavaScript 中导入和导出模块的语法，核心是 ES6 模块系统（ECMAScript Modules，简称 ESM），它通过 export 和 import 关键字实现代码复用与组织。注意：这与旧的 CommonJS（module.exports/require）语法不同，两者不能混用，且运行环境需支持 ESM（如现代浏览器、Node.js 12+ 默认启用 ESM 需加 "type": "module"）。

如何导出模块（export）

一个 JS 文件可以导出变量、函数、类等，供其他文件使用。

• 命名导出（Named Export）：可导出多个，名字必须一致才能正确导入。
  例：
  export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
• 默认导出（Default Export）：每个模块最多一个，默认导出不强制命名，导入时可自定义名称。
  例：
  export default function greet() { return 'Hello'; }
  或：export default class App { ... }
• 统一导出 / 重命名导出：
  export { PI as pi, add as sum };
export { default as main } from './main.js';

如何导入模块（import）

导入必须在模块顶层（不能在函数或条件中），且路径需明确（相对或绝对，不支持自动扩展名）。

• 导入命名导出：
  import { PI, add } from './math.js';
import { PI as piVal } from './math.js';
• 导入默认导出：
  import greet from './greet.js';（无需大括号）
  import myGreet from './greet.js';（可任意命名）
• 同时导入默认 + 命名：
  import main, { PI, add } from './math.js';
• 只执行模块（无绑定导入）：
  import './polyfill.js';（常用于加载副作用代码，如全局补丁）

常见注意事项

• 浏览器中使用