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

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://)限制,不是语法错误。浏览器出于安全策略禁止从本地文件系统加载模块。
立即学习“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 中无效);要用完整路径或配置打包器别名。这点常被忽略,尤其从工具链切换到纯浏览器环境时。











