什么是javascript模块_如何使用import和export【教程】

11次阅读

javaScript模块是运行时独立作用域单元,import/export须在顶层静态声明且仅限模块环境;动态导入用await import();命名导出需解构导入,默认导出可重命名;html中需type=”module”且路径带扩展名。

什么是javascript模块_如何使用import和export【教程】

javascript 模块不是“语法糖”,而是运行时真实存在的独立作用域单元;importexport 不能在普通脚本中随意调用,必须明确声明为模块。

为什么 import 放在顶部且不能动态执行

import 是静态声明:解析阶段就确定依赖关系,不支持条件导入或运行时拼接路径。浏览器和打包工具(如 webpackvite)都依赖这个特性做 tree-shaking 和预加载。

  • 错误写法:if (cond) import('./utils.js') → 会报 Unexpected Token 'import'
  • 正确替代:const utils = await import('./utils.js')(这是动态 import(),返回 promise,属于函数调用,不是声明)
  • import 必须位于模块顶层,不能嵌套在函数、条件或循环

export 的三种常见形式及对应 import 写法

导出方式决定导入语法,不匹配就会报 undefinedis not exported 错误。

  • 命名导出(named export):export const foo = 1; export function bar() {} → 导入必须用对应名:import { foo, bar } from './module.js'
  • 默认导出(default export):export default function() {}export default class {} → 导入可自定义名:import myFunc from './module.js'(注意无大括号)
  • 混合导出允许同时存在,默认导出 + 若干命名导出;但一个模块最多一个 export default

如何让 HTML 中的 正确加载模块

普通 是 script 模式,import/export 无效;必须显式声明 type="module",且模块脚本天然是 defer 行为。

立即学习Java免费学习笔记(深入)”;

  • 正确写法:
  • 相对路径必须带扩展名(如 ./utils.js),不能省略为 ./utilsnode.js 允许,浏览器模块不支持)
  • 模块路径是 URL,不支持 node.js 的包名自动解析(如 import _ from 'lodash' 在纯浏览器中会 404;需用构建工具cdn 显式指定完整路径)

模块作用域的边界很硬:每个 .js 文件默认不是模块,加了 type="module" 或被其他模块 import 才激活;没处理好这点,export 就像没写一样,而 import 会直接报错退出。

text=ZqhQzanResources