什么是模块化_JavaScript中ES6模块如何导入和导出

千晨同学_1787

千晨同学_1787

2026-01-08

300人浏览

原创

es6模块是原生静态系统,import必须顶层以支持编译期分析;命名导出需大括号且名称一致,default导出可重命名;路径须带扩展名或斜杠,裸导入需导入映射。

什么是模块化_javascript中es6模块如何导入和导出

ES6 模块(import/export)不是语法糖,而是 JavaScript 原生的、静态的模块系统——它在编译时就确定依赖关系,不支持运行时动态加载(除非用 import() 动态导入),也不能像 require() 那样写在 if 里。

为什么 import 必须写在顶层作用域

因为 ES6 模块解析是静态的:引擎需要在代码执行前就分析出所有依赖,以便做树摇(tree-shaking)、循环依赖检测和编译优化。一旦放在函数或条件中,就无法静态分析。

  • importexport 语句不能出现在 iffor、函数内部,否则直接报错:Identifier 'import' has already been declaredUnexpected token 'import'
  • 想条件加载?必须用动态导入:
    if (needMath) {
      const { add } = await import('./math.js');
    }
  • Node.js 中需启用 "type": "module" 或用 .mjs 后缀,否则默认按 CommonJS 解析,import 会报 Cannot use import statement outside a module

export 的三种写法及其差异

导出方式决定导入时能否重命名、是否必须解构、是否支持默认导出合并——选错会导致 undefinedUnexpected token 错误。

Java Development Manual
Java Development Manual

Java开发手册规约集合,基于阿里巴巴Java开发手册(嵩山版)。 涵盖7大维度:编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要:(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载
  • 命名导出(named export):可多个,导入时必须用大括号且名称一致
    export const PI = 3.14;
    export function square(x) { return x * x; }
    import { PI, square } from './math.js'; // ✅<br>import { pi } from './math.js'; // ❌ 报错:pi is not exported
  • 默认导出(default export):每个模块最多一个,导入时可自定义名,无需大括号
    export default function calculate() { ... }
    import calc from './calc.js'; // ✅<br>import { default as calc } from './calc.js'; // ✅ 但冗余
  • 混合导出要小心:默认导出 + 命名导出可以共存,但不能 export default 写两次,也不能 export default const x = 1(语法错误)

import 路径必须带扩展名或斜杠吗

浏览器中必须显式写后缀(如 .js),Node.js(ESM 模式)也默认要求;省略会报 ERR_MODULE_NOT_FOUND

  • 浏览器环境:import { foo } from './utils.js' ✅,import { foo } from './utils' ❌(除非服务器配了 MIME 或使用构建工具)
  • Node.js ESM:import { bar } from './config.json' ❌(JSON 不被原生支持),但 import config from './config.json' with { type: 'json' } ✅(仅 17.1+)
  • Vite/Webpack 等工具允许省略扩展名,是因为它们在打包时做了路径解析;但原生 ESM 不行——别把开发环境的便利当成语言特性

模块路径是相对 URL,不是文件系统路径;./../ 是必须的,import 'lodash' 这种裸导入只在有导入映射(imports 字段)或包内才合法。实际项目里最容易卡住的,往往不是语法,而是路径解析失败或环境没开 ESM 模式。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1935

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2542

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

896

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

2839

7

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

265

5

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

386

5

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.24

335

12

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

2023.11.27

1935

6

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

2023.09.14

11666

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习