作为现代网页开发的重要一环，在前端领域中，模块化开发已经成为主流的开发模式，它能够增强代码复用性、提升开发效率，还能够在日后维护阶段中减少代码的耦合性和维护成本。
ES6 中推出了标准的模块系统，使用 ES6 的模块系统可以使我们更方便地进行代码组织和管理，其中包括了向外暴露代码的方式、导入别的模块等功能。
导出
在 ES6 中可以使用 export 关键字来导出函数、变量、类、对象等导出的对象指定可以被外部代码引用的属性，常常会使用以下两种方式进行导出。
默认导出
使用 export default 可以导出一个默认的值。
-- -------------------- ---- ------- -- --------- ------ ------- ----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - ----- - --------------- ---- -- ------------- --- ----------- ----- ------- - -展开代码
// main.js import Person from './Person.js'; // 注意不需要使用 {} 包裹 const person = new Person('Tom', 18); person.say();
当然，一个模块可以只有一个默认输出，如果需要导出多个，可以使用对象的方式。
// utils.js const add = (a, b) => a + b; const minus = (a, b) => a - b; export default { add, minus };
// main.js import Utils from './utils.js'; // 这里的 Utils 代表 utils.js 中默认导出的整个对象 console.log(Utils.add(1, 2)); // 3
命名导出
命名导出即通过指定变量名或函数名等形式导出模块中的变量、函数等内容，并在外部代码中使用时需要使用对应的名字。
// utils.js export const add = (a, b) => a + b; export const minus = (a, b) => a - b;
// main.js import { add, minus } from './utils.js'; console.log(add(1, 2)); // 3
导入
在 ES6 中使用 import 关键字来引入模块，就是从模块中加载到当前模块中使用，与导出类似，引入时也包括了两种方式，即默认引入和命名引入。
默认引入
使用 import 可以引入之前默认导出的值。
-- -------------------- ---- ------- -- --------- ------ ------- ----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - ----- - --------------- ---- -- ------------- --- ----------- ----- ------- - -展开代码
// main.js import Person from './Person.js'; // 注意使用默认导出时不需要加 { } const person = new Person('Tom', 18); person.say();
命名引入
命名引入需要在导入时声明与导出相同的变量名、函数名，以便使用时能够直接调用。
// utils.js export const add = (a, b) => a + b; export const minus = (a, b) => a - b;
// main.js import { add, minus } from './utils.js'; console.log(add(1, 2)); // 3
模块路径与 loader
在 Webpack 等模块打包工具中，虽然都支持 ES6 的模块化语法，但它们仍然需要一个另外的东西来定义模块路径，因为 ES6 并没有提供类似 CommonJS 中的 ${basePath}/xxx.js 的语法来自定义查找路径。
同时，由于 ES6 模块化对代码进行了封装，所以需要通过 loader 去加载和解析这些代码，目前比较流行的有 babel-loader 以及 ES6 Module Transpiler。
结语
ES6 模块化标准是接下来前端领域中必不可少的一项技术，使用了它可以大大提升代码的可读性和可维护性，因此对于前端开发者来说更加应该去了解和掌握使用这项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c87c58e46428fe9ef0df87
