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 组件、类构造器),其余工具函数/常量用命名导出。
立即学习“Java免费学习笔记(深入)”;
动态导入 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 中完全不同,同一份代码在两边跑可能一个报路径错、一个报语法错。调试前先确认运行环境和模块配置是否对齐。











