javascript模块是什么_如何使用import和export管理代码【教程】 返回列表

JavaScript模块需在模块上下文中运行，import/export是静态声明且仅限顶层作用域，动态导入用import()；默认导出与命名导出语法不同，混用需注意大括号；浏览器本地文件协议限制需HTTP服务解决。

JavaScript 模块是独立的代码单元，拥有自己的作用域，不会污染全局环境；import 和 export 是 ES 模块（ESM）的标准语法，但**必须在模块上下文里运行**——浏览器中需加 type="module"，Node.js 中需设 "type": "modul

e" 或用 .mjs 后缀，否则直接报错。

为什么 import 不能写在 if 里或函数中？

import 和 export 是静态声明，编译时就解析，不支持条件加载或动态执行。运行时才决定是否导入？得用 import()（带括号的函数形式）。

• import / export 必须出现在顶层作用域，哪怕只缩进一个空格也会报 Unexpected token 'import'
• import() 返回 Promise，适合按需加载：例如 if (user.isAdmin) { const mod = await import('./admin.js'); mod.showPanel(); }
• 打包工具（如 Vite、Webpack）能识别 import() 做代码分割，但原生 ESM 不支持 import.meta.url 以外的运行时路径拼接

export default 和命名导出混用要注意什么？

一个模块可以有且仅有一个 export default，但可同时有多个命名导出；导入时语法不同，混用容易漏掉大括号或默认名。

• 导出：export default function foo() {} + export const BAR = 1; 是合法的
• 导入默认导出必须不用大括号：import foo from './mod.js'；导入命名导出必须加大括号：import { BAR } from './mod.js'
• 想一次性导入全部？用 import * as mod from './mod.js'，此时 mod.default 拿默认导出，mod.BAR 拿命名导出
• Node.js 的 CommonJS（require()）无法直接读取 export default，会得到 { default: fn } 对象，需写 require('./mod.js').default

浏览器中直接跑 import 报 “Not allowed to load local resource” 怎么办？

这是本地文件协议（file://）限制，不是语法错误。浏览器出于安全策略禁止从本地文件系统加载模块。

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

• 最简单解法：起一个本地服务，比如 npx serve 或 python3 -m http.server 8000，然后访问 http://localhost:8000
• Chrome 可临时启动时加参数：chrome --allow-file-access-from-files（仅开发用，不推荐）
• Vite / Webpack 等工具的 dev server 默认解决此问题，但它们本质也是起了 HTTP 服务
• 确认 HTML 中 script 标签写了 ，漏掉 type="module" 会导致 import 被忽略或报错

模块解析路径是相对的，但不支持 Node.js 风格的包名省略（如 import { debounce } from 'lodash' 在原生 ESM 中无效）；要用完整路径或配置打包器别名。这点常被忽略，尤其从工具链切换到纯浏览器环境时。