一文彻底搞定es6模块化

1. 模块化概述

在 JavaScript 应用开发中，模块化是必不可少的一部分。模块化主要是为了解决全局命名冲突、代码重复以及依赖管理等问题。ES6 给 JavaScript 带来了官方的模块化支持，这里就来详细说明一下 ES6 模块化的具体实现方式。

1.1 CommonJS 和 AMD

在 ES6 引入模块化之前，有两个主要的模块化规范：CommonJS 和 AMD。这两个规范有各自的优缺点，但它们在 Node.js 和浏览器端开发中都得到了广泛的应用。

CommonJS：是一套 JavaScript 模块化规范，用于服务器端（Node.js）的 JavaScript 编程，对于客户端的 JavaScript 编程则需要通过工具包进行转换。CommonJS 模块化主要依赖 require 和 module.exports 两个对象来实现。一个模块只能定义一个模块，一个文件就是一个模块。

// 导入
var module = require('module');
// 导出
module.exports = {};

AMD：是一套适用于浏览器端模块化的规范，特点是异步加载模块，支持多个和循环依赖。主要依赖于 require.js 实现，通过 define 和 require 两个函数来实现模块化。

// 定义
define(['module'], function(module) {
  // 模块代码
});
// 加载
require(['module'], function(module) {
  // 执行模块代码
});

1.2 ES6 模块化的特点

ES6 模块化是官方标准，支持静态编译和动态引入两种方式。ES6 的模块化规范采用严格模式，模块内部默认为 严格模式，并且没有变量提升，所以模块成员必须先定义后使用，变量和函数可以导出并在其他模块中使用。

2. 导出和导入

2.1 导出

在 ES6 中，使用 export 关键字来导出模块成员，可以 export 变量、函数、类、默认函数和默认类。使用 export default 关键字导出默认值。

// 导出变量
export const name = 'kobe';
// 导出函数
export function sum(a, b) {
  return a + b;
}
// 导出类
export class Person {...}
// 导出默认函数
export default function() {...}
// 导出默认类
export default class {...}

在导出时，export 和 export default 不能同时使用。

2.2 导入

使用 import 关键字来导入其他模块成员，可以按需导入、重命名导出成员、导入整个文件作为一个模块对象。

// 导入单个成员
import { name } from './module.js';
// 导入多个成员
import { sum, minus } from './module.js';
// 重命名成员
import { name as myName } from './module.js';
// 导入整个模块
import * as math from './module.js';

3. 循环依赖

ES6 模块化支持循环依赖，但是需要注意依赖的执行顺序。如果存在循环依赖，导入的变量只会是空对象。

// moduleA.js
import { b } from './moduleB.js';
console.log('moduleA:', b); // 输出空对象 {}
// moduleB.js
import { a } from './moduleA.js';
console.log('moduleB:', a); // 输出空对象 {}
export const b = 2;

如果想正确执行程序，需要改为导入函数或者类，避免循环依赖问题。

4. 总结

ES6 模块化是 JavaScript 开发中的重要组成部分，支持静态编译和动态引入两种方式，使得模块开发更加简单和灵活。在开发过程中，需要注意避免循环依赖的问题，导入导出时也要遵循规范，确保代码的正确性和可维护性。