ES模块的export必须在顶层声明，不可在条件语句中；import路径需带扩展名或符合解析规则；default与named export需分开导入；动态import()返回Promise，须异步处理。
export 不能在条件语句里用
ES 模块的 export 必须是顶层声明，不能包裹在 if、for 或函数里。否则会报错 Unexpected token 'export' 或 Cannot use import statement outside a module（后者常因运行环境未启用模块模式导致）。
- ✅ 正确写法：直接导出变量、函数或对象
export const API_URL = 'https://api.example.com';
export function fetchData() { return fetch(API_URL); }
export default class Logger { log(msg) { console.log(msg); } }
- ❌ 错误写法：条件导出、动态导出、运行时导出
if (process.env.NODE_ENV === 'dev') {
export const DEBUG = true; // SyntaxError
}
- 替代方案：用具名导出 + 对象聚合，再按需解构
const features = {
debug: process.env.NODE_ENV === 'dev',
analytics: true
};
export { features };
import 路径必须带扩展名或满足自动解析规则
在浏览器原生 ESM 中，import 的路径必须是相对路径（./ 或 ../）、绝对路径（/）或完整 URL；且不能省略扩展名（如 .js），除非服务器配置了 MIME 类型和重定向规则。
- ✅ 浏览器中可用：
import { foo } from './utils.js';
import React from 'https://cdn.skypack.dev/react@18';
- ❌ 常见错误：
import { foo } from './utils'; // 报 404：找不到 ./utils
import { bar } from 'lodash'; // 报错：不是有效 URL，也不在 import map 中
- Node.js 环境下需注意：
从 v14.13 起支持 .mjs 或 type: "module" 的 package.json；若用 .js 文件，必须显式声明 "type": "module"，否则 import 会报错。
default 和 named export 混用要小心重命名冲突
一个模块可以同时有 export default 和多个 export（具名），但导入时不能把它们混在同一个 import 语句里，也不能用相同名字重复声明。
- 模块内可这样写：
export default function main() {}
export const VERSION = '1.0';
export function helper() {}
- 导入时必须分开处理：
import main, { VERSION, helper } from './app.js'; // ✅ 正确
import { default as main, VERSION } from './app.js'; // ✅ 也可，但不常用
import main, { VERSION } from './app.js'; // ✅ 同上
import { main, VERSION } from './app.js'; // ❌ main 不是具名导出，会是 undefined
- 容易被忽略的点：default 导出本质是名为
default的具名导出，只是语法糖；所以以下两种等价：
export default function foo() {}
// 等价于
function foo() {}
export { foo as default };
动态 import() 是异步的，不能当同步逻辑用
import() 返回 Promise，适用于按需加载、条件加载或拆包场景，但它不是同步 import 的替代品。直接赋值或想立刻调用会出问题。
- ❌ 错误用法（以为能同步取值）：
const module = import('./math.js'); // module 是 Promise，不是模块对象
console.log(module.add); // undefined
- ✅ 正确用法（配合 await 或 then）：
async function loadMath() {
const math = await import('./math.js');
return math.add(2, 3);
}
// 或
import('./math.js').then(m => m.add(2, 3));
- 注意兼容性：动态
import()在 Node.js v12+ 和现代浏览器中支持良好，但 IE 完全不支持，旧版 Safari 需要检查。
模块路径仍需遵守前述规则（如带 .js 扩展名），且不能传变量拼接的字符串（如 import(`./${name}.js`)）——除非构建工具（如 Webpack/Vite）做了特殊支持，原生 ESM 不允许表达式。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
