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 语句里，也不能用相同名字重复声明。
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
- 模块内可这样写：
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 不允许表达式。
