ECMAScript 2018 中的模块化开发：import/export
在使用 JavaScript 进行开发时，我们经常需要将一个系统拆分成多个模块，方便代码管理和维护。在 ES6 之前，我们通常使用 RequireJS 或者 Browserify 等工具来实现模块化的开发。而在 ES6 之后，JavaScript 本身就实现了模块化开发的支持，使得我们可以更加方便地进行模块化开发。
ES6 中将模块化引入到了 JavaScript 语言标准中，并且 ES6 以后的语言规范也在逐步完善模块系统。其中 import 和 export 是两个比较重要的关键字，它们用于模块文件的导入和导出。
一、模块的导入(import)
ES6 提供了 import 关键字，用于导入其他模块中的内容，其基本语法如下：
import {export1, export2, …} from "module_name";其中，module_name 表示要导入的模块的名字，export1, export2, ... 表示要导入的内容的名字，如果要导入所有的导出内容，可以使用如下语法：
import * as myModule from "module_name";
示例代码如下：
// 导入单个内容
import {func1} from "file1";
// 导入多个内容
import {func1, func2, var1} from "file1";
// 导入所有内容
import * as myModule from "file1";二、模块的导出(export)
ES6 提供了 export 关键字，用于导出任意内容，可以是变量、函数、类、甚至是整个模块。其基本语法如下：
// 导出变量、函数、类
export var1;
export function func1() {}
export class Class1 {}
// 导出整个模块
export * from "file1";需要注意的是，以上三种内容的导出方法都可以使用 default 关键字来指定模块的默认导出，示例如下：
// 导出默认变量
export default var1;
// 导出默认函数
export default function() {}
// 导出默认类
export default class {}三、使用模块
ES6 模块化开发的方式和 CommonJS 或者 AMD 规范的模块化方式还是有一些不同的，我们来看一下如何使用 ES6 模块：
-- -------------------- ---- ------- -- ---- -------- --- ---- - ------- -------- ------- -- -------- ------- -- ----- -------- -- ------ ----- ------ ------- ------ -------- -- ---- ------ ------ ------ ------ ------- ---- --------
除了可以导出变量、函数和类之外，ES6 还支持导出一个默认内容，这种默认导出内容只能有一个，而且我们可以使用 import 语句来为其指定任意名称。示例如下：
// 定义模块 file1.js
export default function() {};
// 导入模块
import myDefault from "file1";四、总结
ES6 中的模块化开发，通过 import 和 export 关键字的支持，让 JavaScript 语言本身具有了模块化开发的能力。相比于以前常用的 RequireJS 等模块化工具，ES6 模块化开发更加直接、简单和规范化，不再需要额外的库或者框架来实现模块化。希望本文内容能够对正在学习 ES6 的前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e599a9f6b2d6eab3109fae