什么是JavaScript模块_如何导入和导出模块功能？

苏承栈

2026-11-01 • 👁 0人浏览过

JavaScript模块是ES6起原生支持的代码组织方式，通过export导出（命名/默认）和import导入实现作用域隔离与复用，需配合type="module"或.mjs后缀使用，且import/export仅限顶层。 JavaScript模块是将代码组织成独立、可复用单元的方式，每个模块拥有自己的作用域，不会污染全局命名空间。从ES6（ECMAScript 2015）开始，原生支持

import

和

export

语法，成为现代前端开发的标准实践。模块的基本导出方式一个模块通过

export

向外提供变量、函数、类或对象。可以使用命名导出（named export）或默认导出（default export）：命名导出：可导出多个值，导入时必须使用对应名称 ✅ 正确写法：

export const PI = 3.14159;

export function add(a, b) { return a + b; }

export class Calculator { ... }

默认导出：每个模块最多一个，默认导出不需要名称，导入时可自定义名称 ✅ 正确写法：

export default function greet(name) { return `Hello, ${name}`; }

或

export default class App { ... }

模块的导入方式使用

import

语句加载其他模块的功能，导入语法需与导出方式匹配：导入命名导出：用大括号指定名称

import { PI, add, Calculator } from './math.js';

也可重命名：

import { add as sum } from './math.js';

导入默认导出：不加花括号，名称可任意取

import greet from './greeting.js';

（注意：这里

greet

不是固定名，可写成

import hello from './greeting.js'

）同时导入默认和命名导出：

import greet, { PI, add } from './utils.js';

整体导入（namespace import）：把所有导出挂载到一个对象上

import * as utils from './utils.js';

使用：

utils.PI

、

utils.add(2, 3)

模块使用的注意事项模块系统依赖严格的语法和环境支持： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载立即学习 “ Java免费学习笔记（深入） ”；文件必须以

.mjs

后缀命名，或在

Node. js 中启用ES模块：在

package.json

中添加

"type": "module"

，或使用

.mjs

后缀旧项目仍用CommonJS（

require

module.exports

）？可通过打包工具（如Webpack、Vite）混合处理，但建议新项目统一用ESM

相关文章