首页 > 文章 > 前端

ES6模块导入导出全解析

时间：2025-11-03 20:37:04 167浏览收藏

ES6模块化是现代JavaScript开发的基石，本文详解JS模块的导入导出机制，助你轻松掌握ES6模块的使用。通过`export`和`import`关键字，实现代码的封装与复用，支持命名导出、默认导出以及混合导入等多种方式。在HTML中使用模块时，务必添加`type="module"`属性，并保留`.js`后缀，确保浏览器正确识别并执行模块代码。掌握ES6模块化，能够显著提升项目的可维护性和可读性，是前端工程师必备技能。了解更多关于JS模块化开发的技巧，请继续阅读本文。

ES6模块系统通过export和import实现代码封装与复用，支持命名导出、默认导出及混合导入方式，需在HTML中使用type="module"并保留.js后缀，提升项目可维护性。

JS模块怎么导入_JavaScriptES6模块导入导出使用方法详解

在ES6中，JavaScript引入了原生的模块系统，让开发者可以更清晰地组织代码。模块的核心是导出（export）和导入（import），实现功能的封装与复用。

1. 模块导出（export）

一个JS文件可以作为模块，通过export关键字将变量、函数或类暴露出去，供其他文件使用。

命名导出（Named Exports）：可以导出多个值。

// mathUtils.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const PI = 3.14159;

也可以统一导出：

// mathUtils.js
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const PI = 3.14159;
<p>export { add, multiply, PI };</p>

默认导出（Default Export）：每个模块只能有一个默认导出，适合导出主功能，如一个类或主函数。

// calculator.js
export default class Calculator {
  static add(a, b) {
    return a + b;
  }
}

2. 模块导入（import）

使用import从其他模块加载内容。

导入命名导出：

// main.js
import { add, multiply } from './mathUtils.js';
console.log(add(2, 3));      // 5
console.log(multiply(2, 3)); // 6

可以重命名导入：

import { add as sum, PI } from './mathUtils.js';
console.log(sum(1, 2)); // 3

导入默认导出：

// main.js
import Calculator from './calculator.js';
console.log(Calculator.add(5, 3)); // 8

注意：默认导入时名字可自定义，不需与导出时一致。

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

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

导入所有内容到一个对象：

import * as MathLib from './mathUtils.js';
console.log(MathLib.add(2, 3));     // 5
console.log(MathLib.multiply(2, 4)); // 8
console.log(MathLib.PI);            // 3.14159

3. 使用模块的实际注意事项

浏览器中使用模块需要满足以下条件：

HTML中引入模块需添加type="module"：

<script type="module" src="main.js"></script>

模块路径必须是完整文件名，包括.js后缀（不能省略）；
模块运行在严格模式下，无需手动写"use strict";；
模块支持相对路径（./, ../）或绝对路径；
在Node.js环境中需启用ES模块支持（如使用.mjs扩展名或在package.json中设置"type": "module"）。

4. 常见使用场景示例

假设有一个工具模块utils.js：

// utils.js
export const formatPrice = (price) => `$${price.toFixed(2)}`;
export const isEmpty = (str) => str.trim() === '';
export default function log(msg) {
  console.log('[LOG]', msg);
}

在主文件中使用：

// app.js
import logger, { formatPrice, isEmpty } from './utils.js';
<p>logger('App started');
console.log(formatPrice(19.9)); // $19.90
console.log(isEmpty(''));       // true</p>

基本上就这些。掌握export和import的几种形式，就能高效组织现代JavaScript项目。模块化让代码更清晰、可维护性更强，是前端开发的必备技能。

今天关于《ES6模块导入导出全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

代码封装 import export type="module" ES6模块化