ES6模块化通过import和export实现代码复用，支持静态分析、循环依赖处理和浏览器原生支持，优于CommonJS与AMD；提供命名导出与默认导出两种方式，适用于多成员暴露或单个主要实体导出场景；支持动态导入和import.meta等高级特性，可在浏览器中通过type="module"使用，需注意兼容性与CORS问题；结合TypeScript可提升类型安全与项目可维护性。
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
的几种方式：命名导出和默认导出有什么区别？何时使用哪种方式？
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();
何时使用哪种方式？
- 命名导出： 当你需要导出多个相关的成员时，使用命名导出。这使得代码更清晰，也更容易理解每个成员的作用。
- 默认导出： 当你只想导出一个主要的实体（例如，一个类或一个函数）时，使用默认导出。这通常用于创建库或框架，其中一个模块代表一个主要的功能。
一个模块可以同时使用命名导出和默认导出，但这通常会使代码更难理解，应尽量避免。
import
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/**/*" ] }
esModuleInterop
选项允许你导入CommonJS模块，就像它们是ES6模块一样。这可以简化代码，并提高代码的可读性。
结合TypeScript和ES6模块化，可以编写出更健壮、更易于维护的JavaScript代码。
javascript es6 java html js node.js json node JavaScript typescript json firefox chrome safari es6 edge webpack Resource require 循环 JS 对象 default promise 异步