JavaScript模块是什么？如何用import/export管理代码

JavaScript模块是现代前端开发中组织和管理代码的核心机制，它通过独立作用域避免全局污染，并借助静态的import/export语法实现清晰的依赖声明与代码复用；但必须注意其严格的运行约束——需在模块上下文中执行（如HTML中添加type="module"或Node.js配置"type":"module"），且import/export只能出现在顶层、不可动态条件使用，替代方案是返回Promise的动态import()；同时要区分默认导出与命名导出的导入语法差异，警惕混用时的大括号陷阱；而本地文件协议限制、路径解析规则及CommonJS兼容性等问题，更是开发者从工具链走向原生ESM时极易踩坑的关键细节。

JavaScript 模块是独立的代码单元，拥有自己的作用域，不会污染全局环境；import 和 export 是 ES 模块（ESM）的标准语法，但**必须在模块上下文里运行**——浏览器中需加 type="module"，Node.js 中需设 "type": "module" 或用 .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://）限制，不是语法错误。浏览器出于安全策略禁止从本地文件系统加载模块。

• 最简单解法：起一个本地服务，比如 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 中无效）；要用完整路径或配置打包器别名。这点常被忽略，尤其从工具链切换到纯浏览器环境时。

今天关于《JavaScript模块是什么？如何用import/export管理代码》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！