javascript模块化_import和export如何使用

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 语句里，也不能用相同名字重复声明。

立即学习“Java免费学习笔记（深入）”；

• 模块内可这样写：

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 不允许表达式。