ES Module的导入和导出

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。在早期的js没有模块化的概念。但是随着发展又需要模块化，于是出现了集中规范，早期比较出名的就有AMD、CMD，他们都只是一种规范，没有具体的实践，而AMD具体的实践者就有requirejs、curl，CMD则有seajs，不过随着历史的发展，这两种规范都慢慢的推出了历史的舞台，现在流行的commonjs 和ES6 Module，而node就是commonjs最佳的实践者，而ES Module则是官方规范的模块化，自然而然就是现在最主流的模块化方案，ES Module的工作原理有一篇文章讲的非常好，如果对英文没有压力的话，我觉得非常有必要阅读一篇。

export

导出

第一种方法：

1 2	export const name = "coderwei"; export const age = 19;

第二种方式：

const name = "coderwei";
const age = 19;
export {
	name,
    age
};

第三种方式：

const name = "coderwei";
const age = 19;
export {
	name as fname,
    age as fage
};
//这种方式不常用，如果需要起别名通常在导入的时候起别名

导入

第一种导入方式：

1
2
3

import { name, age } from "./01_导出的三种方式/01_导出的三种方式.js";

console.log(name, age);

第二种导入方式：起别名

import {
  name as fname,
  age as fage,
} from "./01_导出的三种方式/01_导出的三种方式.js";

console.log(fname, fage);

第三种导入方式：

1
2
3

import * as Info from "./01_导出的三种方式/01_导出的三种方式.js";

console.log(Info.name, Info.age);

结合使用

结合实际项目，在开发中可以会有一个utils工具库，封装一些常用的工具函数，所以这个时候我们通常会给他定义一个统一的出口(index.js)，避免我们在导入的时候找来找去的，也方便后续进行管理。

/utils/formatDate.js

1
2
3

export function formatDate() {
  return 123;
}

/utils/foramtPrice.js

export function formatPrice() {
  return "￥" + "99.99";
}

export function rmbToGreenback() {
  return "$" + "99.99";
}

/utils/index.js

// 导入导出方式1
import { formatDate } from "./formatDate.js";
import { formatPrice, rmbToGreenback } from "./formatPrice.js";

export { formatDate, formatPrice, rmbToGreenback };

// 导入导出方式2
export { formatDate } from "./formatDate.js";
export { formatPrice, rmbToGreenback } from "./formatPrice.js";

// 导入导出方式3
export * from "./formatDate.js";
export * from "./formatPrice.js";

export default

export导出要求了我们导出的叫什么，导入的时候就一定要叫什么，不然的话就找不到了。当然我也可以给一个模块定义一个默认导出的内容，而这个默认导出的内容就是用export default声明的，再导入的时候也不需要关心导出的名字是什么，由开发者自己决定，同一个模块只能有一个默认导出的变量

导出

// 第一种方式可以通过起别名的形式声明一个默认导出的变量，比如说
const name = "coderwei";
const age = 19;

export { name, age as default };

// 第二种导出方式可以使用export default
const name = "coderwei";
const age = 19;
export default age;