0

0

javascript的ES6模块如何导入导出?【教程】

紅蓮之龍

紅蓮之龍

发布时间:2026-01-18 22:14:01

|

809人浏览过

|

来源于php中文网

原创

es6模块的import/export是静态语法,必须在顶层作用域;命名导出需大括号且名称匹配,默认导出仅一个、导入名可自定义;动态import()返回promise,支持条件加载但不参与tree-shaking;node.js需.mjs后缀或"type":"module"且路径带扩展名。

javascript的es6模块如何导入导出?【教程】

ES6 模块的 importexport 不是运行时动态行为,而是静态语法,必须写在顶层作用域,不能放在 if、函数或循环里 —— 这是绝大多数初学者卡住的第一关。

导出方式:命名导出 vs 默认导出,别混用

命名导出(export)适合导出多个值,导入时必须用大括号且名称严格匹配;默认导出(export default)每个模块只能有一个,导入时名字可自定义,不加大括号。

常见错误:把命名导出当成默认导出用,比如:

export const apiURL = 'https://api.example.com';
// 错误导入(会报错:apiURL is not exported)
import apiURL from './config.js';

// 正确导入命名导出
import { apiURL } from './config.js';

// 或改用默认导出(仅当确实只需要一个主出口时)
export default { apiURL: 'https://api.example.com' };
// 对应导入
import config from './config.js'; // 注意:无大括号,名字任意

建议:export default 用于模块主功能(如 React 组件、类构造器),其余工具函数/常量用命名导出。

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

动态导入 import():解决按需加载和条件逻辑

import() 是函数调用,返回 Promise,能写在条件分支、循环或异步回调中,但不能解构赋值到顶层变量(因为不是静态声明)。

VIVA
VIVA

一个免费的AI创意视觉设计平台

下载
  • 支持路径拼接(如 import(`./pages/${page}.js`)),但 Webpack/Vite 等打包器对字符串模板有静态分析限制,太动态会失败
  • 浏览器原生支持,无需 polyfill,但 Node.js 需启用 --experimental-modules 或使用 .mjs 后缀
  • 不能替代静态 import 做常规依赖管理 —— 它不参与 tree-shaking,且模块不会被提前解析

典型用法:

async function loadModule() {
  if (needsAuth) {
    const authModule = await import('./auth.js');
    authModule.init();
  }
}

Node.js 中使用 ES6 模块:后缀和 type 字段缺一不可

Node.js 默认把 .js 当 CommonJS,即使写了 export 也会报错 Cannot use import statement outside a module

必须同时满足:

  • 文件后缀为 .mjs,或
  • package.json 中声明 "type": "module"
  • 且所有 import/export 路径必须带扩展名(import './utils.js' ✅,import './utils' ❌)

注意:混合使用 require()import 会导致跨模块的 this__dirname 行为异常,尽量避免。

真正容易被忽略的是:模块解析规则在浏览器和 Node.js 中完全不同,同一份代码在两边跑可能一个报路径错、一个报语法错。调试前先确认运行环境和模块配置是否对齐。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

455

2023.08.07

json是什么
json是什么

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

546

2023.08.23

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

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

334

2023.10.13

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

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

82

2025.09.10

es6新特性
es6新特性

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

106

2023.07.17

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

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

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

231

2025.12.24

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1566

2023.10.24

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号