初识ES6语法

初识 ES 6 模块（ESM）语法

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全原生。

ES6 模块的语法非常简单，主要由两个部分组成：

• 模块的定义
• 模块的导入和导出

模块的定义

一个模块就是一个独立的文件，它包含了相关的内容，例如函数、类、变量等。一个模块可以只导出部分内容，也可以把所有内容都导出。

要定义一个模块，只需要在文件的开头加上 export 即可。例如，以下代码定义了一个名为 my-module.js 的模块：

// my-module.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.1415926;

模块的导入和导出

要导入一个模块，可以使用 import 关键字。例如，以下代码导入了 my-module.js 模块中的 add 函数和 PI 常量：

// main.js
import { add, PI } from './my-module.js';

const result = add(1, 2);
console.log(result); // 3

console.log(PI); // 3.1415926

上面的代码中，./my-module.js 表示要导入的模块的相对路径。

导出默认值

除了可以导出函数、类、变量等内容之外，还可以导出默认值。默认值可以是任何类型的值，例如函数、类、对象、字符串、数字等。

要导出默认值，可以使用 export default 关键字。例如，以下代码导出了一个名为 add 的默认函数：

// my-module.js
export default function add(a, b) {
  return a + b;
}

要导入默认值，可以使用 import 关键字和 default 关键字。例如，以下代码导入了 my-module.js 模块中的默认函数：

// main.js
import add from './my-module.js';

const result = add(1, 2);
console.log(result); // 3

命名导出和导入

除了可以导出默认值之外，还可以导出具名的值。具名的值可以是任何类型的值，例如函数、类、变量等。

要导出具名的值，可以使用 export 关键字和变量名。例如，以下代码导出了一个名为 add 的具名函数：

// my-module.js
export function add(a, b) {
  return a + b;
}

要导入具名的值，可以使用 import 关键字和变量名。例如，以下代码导入了 my-module.js 模块中的 add 函数：

// main.js
import { add } from './my-module.js';

const result = add(1, 2);
console.log(result); // 3

总结

ES6 模块语法非常简单，主要由两个部分组成：模块的定义和模块的导入和导出。

模块的定义只需要在文件的开头加上 export 关键字即可。

模块的导入可以使用 import 关键字。

除了可以导出默认值之外，还可以导出具名的值。

导出默认值可以使用 export default 关键字。

导出具名的值可以使用 export 关键字和变量名。

导入默认值可以使用 import 关键字和 default 关键字。

导入具名的值可以使用 import 关键字和变量名。