ES6模块导入导出方法详解

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《ES6模块怎么导入导出？新手教程》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

ES6模块的import/export是静态语法，必须在顶层作用域；命名导出需大括号且名称匹配，默认导出仅一个、导入名可自定义；动态import()返回Promise，支持条件加载但不参与tree-shaking；Node.js需.mjs后缀或"type":"module"且路径带扩展名。

ES6 模块的 import 和 export 不是运行时动态行为，而是静态语法，必须写在顶层作用域，不能放在 if、函数或循环里 —— 这是绝大多数初学者卡住的第一关。

导出方式：命名导出 vs 默认导出，别混用

命名导出（export）适合导出多个值，导入时必须用大括号且名称严格匹配；默认导出（export default）每个模块只能有一个，导入时名字可自定义，不加大括号。

常见错误：把命名导出当成默认导出用，比如：

export const apiURL = 'https://api.example.com';
// 错误导入（会报错：apiURL is not exported）
import apiURL from './config.js';

// 正确导入命名导出
import { apiURL } from './config.js';

// 或改用默认导出（仅当确实只需要一个主出口时）
export default { apiURL: 'https://api.example.com' };
// 对应导入
import config from './config.js'; // 注意：无大括号，名字任意

建议：export default 用于模块主功能（如 React 组件、类构造器），其余工具函数/常量用命名导出。

动态导入 import()：解决按需加载和条件逻辑

import() 是函数调用，返回 Promise，能写在条件分支、循环或异步回调中，但不能解构赋值到顶层变量（因为不是静态声明）。

• 支持路径拼接（如 import(`./pages/${page}.js`)），但 Webpack/Vite 等打包器对字符串模板有静态分析限制，太动态会失败
• 浏览器原生支持，无需 polyfill，但 Node.js 需启用 --experimental-modules 或使用 .mjs 后缀
• 不能替代静态 import 做常规依赖管理 —— 它不参与 tree-shaking，且模块不会被提前解析

典型用法：

async function loadModule() {
  if (needsAuth) {
    const authModule = await import('./auth.js');
    authModule.init();
  }
}

Node.js 中使用 ES6 模块：后缀和 type 字段缺一不可

Node.js 默认把 .js 当 CommonJS，即使写了 export 也会报错 Cannot use import statement outside a module。

必须同时满足：

• 文件后缀为 .mjs，或
• package.json 中声明 "type": "module"
• 且所有 import/export 路径必须带扩展名（import './utils.js' ✅，import './utils' ❌）

注意：混合使用 require() 和 import 会导致跨模块的 this 和 __dirname 行为异常，尽量避免。

真正容易被忽略的是：模块解析规则在浏览器和 Node.js 中完全不同，同一份代码在两边跑可能一个报路径错、一个报语法错。调试前先确认运行环境和模块配置是否对齐。

好了，本文到此结束，带大家了解了《ES6模块导入导出方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！