CommonJs与ES Module

早期的JavaScript是没有模块化的，直到ES6才出现了ES Module，而在这之前，也出现了AMD、CMD模块规范，不过随着ES Module以及Webpack的出现，除了历史项目，已经鲜有问津。而CommonJs因Node的实现而名声大噪，目前依然占有一定地位。

CommonJs

在Node中每一个js文件都是一个模块，内部通过使用module.exports导出

导出方式一

1. module.exports

   module.exports默认导出的就是一个对象

// 1
module.exports = {
	name: "tianzhen",
};

// 2
const obj = {
	name: "tianzhen",
};
module.exports = obj;

// 3
module.exports.name = "tianzhen";

1. 上面的三种写法结果都是一样的
2. 1和2是覆盖了默认的导出对象
3. 3是在默认的导出对象上添加的属性

导出方式二

2. exports

// 1
exports.name = "tianzhen";
exports.sayHello = function () {};

// 2
// 这种方式是不行的，虽然看起来和ES Module的export很像
exports = {
	name: "error",
};

1. exports与module.exports写法是等价的
2. exports = {} 没有这种方式

导入

使用require函数

// 1 node核心模块
const path = require("path");
// 2 第三方模块
const xx = require("xxx");
// 3 路径模块
const xxx = require("./xxx");

node核心模块

常见的有path http fs

第三方模块

1. 会在项目node_modules里查找
2. 如果找不到则去父级node_modules里查找
3. 一直找到根路径下的node_modules

路径字符串

1. 如果有后缀，则按照后缀名格式查找
2. 没有后缀
   1. 查找文件xx
   2. 查找xx.js
   3. 查找xx.json
   4. 查找xx.node
3. 没有找到对应文件，将xx作为一个目录
   • 查找目录下的index文件
   1. xx/index.js
   2. xx/index.json
   3. xx/index.node

ES Module

导出

// 1
export const name = "tianzhen";
// 2
const name = "tianzhen";
export { name };

• 这两种写法效果是一样的
• 注意方式2并不是导出一个对象，而是export的语法

// 3 设置别名
const name = "tianzhen";
export { name as authorName };

// 4 默认导出
const obj = {
	name: "tianzhen",
};
export default obj;

导入

// 1
import { name } from "xx";
// 2 设置alias
import { name as authorName } from "xx";
// 3 如果导出有默认导出default
import module, { name } from "xx"; // module是自定义名字

• export default 只能有一个
• import() 也可以是一个函数，返回的是一个promise