ES6模块化：Import和Export的完整指南-js教程-PHP中文网

ES6模块化：Import和Export的完整指南

betcha

发布： 2025-09-22 16:29:01

原创

1438人浏览过

ES6模块化通过import和export实现代码复用，支持静态分析、循环依赖处理和浏览器原生支持，优于CommonJS与AMD；提供命名导出与默认导出两种方式，适用于多成员暴露或单个主要实体导出场景；支持动态导入和import.meta等高级特性，可在浏览器中通过type="module"使用，需注意兼容性与CORS问题；结合TypeScript可提升类型安全与项目可维护性。

es6模块化：import和export的完整指南

ES6模块化通过

import

登录后复制

和

export

登录后复制

关键字，实现了代码的组织和复用，解决了传统JavaScript模块化方案的诸多问题，让大型项目更易于维护和管理。

ES6模块化：

import

登录后复制

和

export

登录后复制

的完整指南

模块化是现代JavaScript开发的核心。ES6引入的原生模块化方案，通过

import

登录后复制

和

export

登录后复制

关键字，彻底改变了JavaScript代码的组织方式。它解决了传统模块化方案（如CommonJS和AMD）的一些问题，并提供了更清晰、更高效的模块管理机制。

为什么要使用ES6模块化？它比CommonJS和AMD好在哪里？

CommonJS（主要用于Node.js环境）和AMD（Asynchronous Module Definition，主要用于浏览器环境）是早期JavaScript模块化的解决方案。CommonJS采用同步加载，在浏览器端需要通过工具（如Browserify或Webpack）进行打包；AMD则采用异步加载，但语法相对复杂。

ES6模块化有以下优势：

静态分析： ES6模块在编译时就能确定模块间的依赖关系，这使得静态分析成为可能，可以进行死代码消除、类型检查等优化。CommonJS和AMD则是在运行时确定依赖关系，无法进行静态分析。
循环依赖处理： ES6模块能更好地处理循环依赖，避免运行时错误。
浏览器原生支持： 现代浏览器已经原生支持ES6模块，无需额外的打包工具（虽然打包工具仍然可以提供其他优化，如代码压缩）。
更简洁的语法：
```
import
```
登录后复制
和
```
export
```
登录后复制
语法比CommonJS的
```
require
```
登录后复制
和
```
module.exports
```
登录后复制
更简洁易懂。

例如，考虑以下CommonJS代码：

// moduleA.js
module.exports = {
  foo: 'bar'
};

// main.js
const moduleA = require('./moduleA');
console.log(moduleA.foo);

登录后复制

对应的ES6模块化代码：

// moduleA.js
export const foo = 'bar';

// main.js
import { foo } from './moduleA.js';
console.log(foo);

登录后复制

ES6的语法更清晰，也更容易理解模块间的依赖关系。

export

登录后复制

的几种方式：命名导出和默认导出有什么区别？何时使用哪种方式？

export

登录后复制

有两种主要方式：命名导出（named export）和默认导出（default export）。

命名导出： 允许你导出多个变量、函数或类。每个导出的成员都有一个名称，在导入时需要使用相同的名称。

// moduleA.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class MyClass {
  // ...
}

登录后复制

导入时：

// main.js
import { PI, add, MyClass } from './moduleA.js';
console.log(PI);
console.log(add(1, 2));
const obj = new MyClass();

登录后复制

默认导出： 允许你导出一个默认值，通常是一个函数、类或对象。每个模块只能有一个默认导出。
```
// moduleB.js
export default function() {
  console.log('Hello, world!');
}
```
登录后复制
导入时：
```
// main.js
import hello from './moduleB.js'; // 可以使用任意名称
hello();
```
登录后复制

何时使用哪种方式？

协和·太初

国内首个针对罕见病领域的AI大模型

查看详情

命名导出： 当你需要导出多个相关的成员时，使用命名导出。这使得代码更清晰，也更容易理解每个成员的作用。
默认导出： 当你只想导出一个主要的实体（例如，一个类或一个函数）时，使用默认导出。这通常用于创建库或框架，其中一个模块代表一个主要的功能。

一个模块可以同时使用命名导出和默认导出，但这通常会使代码更难理解，应尽量避免。

import

登录后复制

的高级用法：动态导入、

import.meta

登录后复制

是什么？

除了基本的

import

登录后复制

语句，ES6还提供了一些高级用法：

动态导入（Dynamic Import）： 使用
```
import()
```
登录后复制
函数可以在运行时动态加载模块。这对于按需加载代码、优化页面加载速度非常有用。
```
// main.js
async function loadModule() {
  const module = await import('./myModule.js');
  module.default(); // 假设myModule.js有一个默认导出
}

loadModule();
```
登录后复制
动态导入返回一个Promise，允许你异步地加载模块。这对于大型单页应用（SPA）特别有用，可以根据用户的操作动态加载不同的模块，减少初始加载时间。
```
import.meta
```
登录后复制
：
```
import.meta
```
登录后复制
是一个包含模块元数据的对象。它有一个
```
url
```
登录后复制
属性，表示当前模块的URL。
```
// myModule.js
console.log(import.meta.url); // 输出当前模块的URL
```
登录后复制
```
import.meta
```
登录后复制
可以用于获取模块的路径、版本信息等，或者用于根据模块的位置加载不同的资源。

如何在浏览器中使用ES6模块？需要注意哪些兼容性问题？

在浏览器中使用ES6模块，需要在

<script>

登录后复制

标签中添加

type="module"

登录后复制

属性。

<!DOCTYPE html>
<html>
<head>
  <title>ES6 Modules</title>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

登录后复制

需要注意以下兼容性问题：

浏览器支持： 现代浏览器（Chrome, Firefox, Safari, Edge）已经原生支持ES6模块。但一些旧版本的浏览器可能不支持，需要使用polyfill或转译工具（如Babel）进行兼容。
CORS： 如果你的模块是从不同的域名加载的，需要确保服务器配置了正确的CORS（Cross-Origin Resource Sharing）头部，允许跨域访问。
文件扩展名： 有些浏览器要求模块文件必须使用
```
.mjs
```
登录后复制
扩展名，或者服务器必须返回正确的
```
Content-Type
```
登录后复制
头部（
```
application/javascript
```
登录后复制
或
```
text/javascript
```
登录后复制
）。

虽然现代浏览器已经原生支持ES6模块，但在实际项目中，通常仍然会使用打包工具（如Webpack, Parcel, Rollup）来优化代码，例如进行代码压缩、合并、tree shaking等。

ES6模块化与TypeScript：如何更好地结合使用？

TypeScript对ES6模块化提供了良好的支持。你可以直接使用

import

登录后复制

和

export

登录后复制

关键字来组织TypeScript代码。

// moduleA.ts
export interface MyInterface {
  name: string;
  age: number;
}

export function greet(person: MyInterface): string {
  return `Hello, ${person.name}!`;
}

// main.ts
import { MyInterface, greet } from './moduleA';

const person: MyInterface = {
  name: 'Alice',
  age: 30
};

console.log(greet(person));

登录后复制

TypeScript编译器会将ES6模块代码转换为CommonJS、AMD或其他模块格式，以便在不同的环境中运行。你可以在

tsconfig.json

登录后复制

文件中配置

module

登录后复制

选项来指定目标模块格式。

{
  "compilerOptions": {
    "module": "esnext", // 使用ES6模块
    "target": "es5", // 编译成ES5代码
    "moduleResolution": "node", // 使用Node.js模块解析规则
    "esModuleInterop": true, // 允许CommonJS模块和ES6模块互操作
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

登录后复制