前言
随着前端技术的不断发展，越来越多的 JS 库和框架出现在我们的日常工作中，模块化成为了前端开发中不可或缺的一部分。ES6 引入的模块化特性，为前端模块化带来了一次彻底的变革，本文将深入浅出 ES6 模块，帮助读者全面了解 ES6 模块的定义、导入、导出以及常见的使用场景。
ES6 Module 是什么
ES6 Module 是 ECMAScript 2015 引入的 JavaScript 模块化方案。它将原本松散耦合的 JS 文件组织方式，变为了严密的模块定义和引用关系。
与 CommonJS 和 AMD 方式不同，ES6 Module 在语言层面实现模块化，它拥有一套完整且规范的语法体系，使得 JS 开发者可以轻松地使用和管理模块，真正做到了代码的复用和可维护性。
在 ES6 Module 中，每个文件都是一个模块，每个模块都有自己的作用域，只对外暴露特定的部分，其他的部分都是私有变量和方法，处理好了代码的依赖关系，也可以更好的便于代码工厂化、自动化构建等。
ES6 Module 导出
ES6 提供了两种方式导出模块，一种是默认导出，另一种是按需导出，我们来一一讲解。
默认导出
默认导出是 ES6 中最常见的一种导出方式，其语法为 export default，以下是一个例子：
// user.js
const name = 'xiaoming';
const age = 18;
export default {
name,
age
}上述代码中，我们使用 export default 导出了一个对象，该对象包含了 name 和 age 两个属性。
按需导出
按需导出是 ES6 中另一种常见的导出方式，其语法为 export， 'import'后面跟大括号。
-- -------------------- ---- ------- -- ------- ------ ----- ---- - ----------- ------ ----- --- - --- -- ---- ------ - ---- - ---- ------------ -- ---- ------ - -- ---- ---- ------------ ----------------------- -- -------- ---------------------- -- --
上述代码中，我们使用 export 关键字导出了两个常量，分别是 name 和 age。在其他模块中，我们可以使用关键字 import 按需引入某个常量，也可以 import * as xx 整体引入。
ES6 Module 导入
ES6 Module 中导入模块的方式也有两种，一种是直接导入，另一种是间接导入，这里也来一一讲解。
直接导入
直接导入是 ES6 中最简单的一种导入方式，其语法为 import，例如：
// user.js
export const name = 'xiaoming';
export const age = 18;
// userDetail.js
import { name, age } from './user.js';
console.log(name); // xiaoming
console.log(age); // 18上述代码中，我们在 userDetail.js 文件中使用了关键字 import 按需引入了 user.js 文件中导出的两个常量 name 和 age。
间接导入
间接导入是 ES6 中使用较为广泛的一种导入方式，通过 import 导入的模块可以被其他模块使用。例如：
-- -------------------- ---- ------- -- ------- ------ ----- ---- - ----------- ------ ----- --- - --- -- -------------- ------ - ----- --- - ---- ------------ ------ -------- ------------- - ------ - ----- --- -- - -- ------------- ------ - ----------- - ---- ------------------- ------------- -- - ----- ----------- ---- -- -
上述代码中，我们在 user.js 中定义了两个常量，然后在 userService.js 中按需引入，并导出一个函数 getUserInfo，这个函数返回了 { name, age }。
在 userDetail.js 中，我们又引用了 userService.js 文件，并调用了 getUserInfo 方法，最终输出了 { name: 'xiaoming', age: 18 }。
常见场景
ES6 Module 在各种场景下都有着广泛的应用。这里列举了一些常见的场景。
应用框架中
应用框架中使用 ES6 Module 最常见的场景之一就是在组件化开发中，每个组件都是一个模块，通过导出和导入来进行组件间的调用和通信。
自己写的库和插件中
在自己写的库和插件中，为了方便其他人使用并维护，通常也会使用 ES6 Module 进行模块化。
工具库中
在工具库中，ES6 Module 的模块化特性，可以使得工具库中代码的重复利用率提高不少。
总结
本文主要深入浅出 ES6 Module，并从定义、导出、导入以及常见场景四个方面进行深入讲解，希望可以帮助读者全面了解 ES6 Module 的用法，从而更好地应用于工作和开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647052de968c7c53b0e7413c