import用于es modules中静态声明依赖，必须位于顶层且路径为字符串字面量；支持命名导入、默认导入、混合导入、命名空间导入及重命名导入；需type="module"且http协议运行；与动态import()本质不同。
在 ES Modules 中，import 用于在编译时静态声明依赖关系，从外部模块引入变量、函数、类或默认导出内容。它必须写在模块顶层（不能在条件语句或函数内部），且路径必须是字符串字面量（不能拼接变量）。
基础导入方式
根据目标模块的导出形式，选择对应写法：
-
导入命名导出：用大括号包裹具体名称，名称必须与源模块中
export的标识符完全一致import { PI, add, subtract } from './math.js'; -
导入默认导出：不加花括号，可自定义接收名
import multiply from './math.js'; -
同时导入默认和命名导出：默认导出放前面，命名导出放括号里
import multiply, { PI, add } from './math.js'; -
导入全部命名导出为命名空间对象：用
import * asimport * as math from './math.js'; console.log(math.PI); -
导入时重命名：用
as关键字避免冲突或提升可读性import { add as plus, subtract as minus } from './math.js';
浏览器中运行的前提条件
直接在 HTML 中使用 ES Module，需满足两个硬性要求：
-
<script></script>标签必须添加type="module"<script src="main.js" type="module"></script> -
页面必须通过 HTTP/HTTPS 协议访问，不能用
file://协议打开，否则浏览器会因跨域策略拒绝加载模块
常见导出与导入的对应关系
确保导入写法与源模块导出方式严格匹配：
- 源模块用
export const foo = 123;→ 必须用import { foo } from '...' - 源模块用
export default function() {...}→ 必须用import xxx from '...'（无花括号） - 源模块用
export { foo as bar };→ 导入时仍用原名bar：import { bar } from '...' - 若模块只有命名导出、没有默认导出，
import xxx from '...'会报错
与动态 import() 的关键区别
import 是静态声明，不是函数，不返回 Promise：
- 路径只能是字符串字面量，如
import './utils.js'✅；import('./' + name)❌ - 支持构建工具做 tree-shaking 和代码分割
- 所有
import语句在模块解析阶段就被收集，执行顺序由依赖图决定，而非代码书写顺序
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
