每个 js 文件都是一个模块,默认采用的 CommonJS 模块规范
新兴的 ES6 模块 pk 传统的 CommonJS 模块
特性 | CommonJS | ES6 模块化 |
导出 |
|
|
导入 |
|
|
加载模式 | 同步 | 异步 |
执行模式 | 单例 | 单例 |
依赖关系 | 静态 | 动态 |
树形摇晃 | 不支持 | 支持 |
加载模式
- CommonJS 是同步的, 在加载模块之前,代码会停止执行。
- ES6 模块是异步的,代码可以继续执行,而模块将在稍后加载。
执行模式
CommonJS 和 ES6 模块的执行都是单例的:模块只会被加载一次,并且所有对模块的引用都将指向同一个实例。
依赖关系
- CommonJS 是静态的, 模块的依赖关系在编译时确定。
- ES6 模块是动态的,模块的依赖关系在运行时确定
树形摇晃
一种优化技术,用于从 JavaScript 捆绑包中删除未使用的代码。
- CommonJS 不支持树形摇晃,模块中未使用的代码也会被加载。
- ES6 模块化支持树形摇晃,可以自动删除未使用的代码,从而减小包的大小。
启用 ES6 模块的三种方法
- 在 package.json 文件中设置
"type": "module"
,这样 Node.js 就会将所有 .js 文件视为 ES6 模块。 - 将文件扩展名改为
.mjs
,这样 Node.js 会自动将其视为 ES6 模块。 - 在 script 标签中添加
type="module"
属性
ES6 模块语法
默认导出导入 export default
每个模块默认的导出只能有一个
可以直接使用函数表达式/匿名函数作为默认导出
导出导入多项 export { }
导出时重命名 as
导出其他模块指定项
导入模块导出的所有内容 import *
导入时重命名 as
导入 json 格式的文件
导入 CommonJS 模块
CommonJS 模块语法
- 每个模块内有一个 module 对象,其有属性 exports(属性值也是一个对象)
- 通过 require() 导入时,会获取到导出模块中 module 对象的 exports 属性
- 在同一个模块中,不要混用 exports 和 module.exports 来导出不同的内容,因为这会导致混淆和不可预期的行为。
导出导入单项 module.exports
导出
导入
导出导入多项 exports
导出
导入