CommonJs VS ES Module
::: details 目录
目录
- CommonJs VS ES Module
- Part. 1: CommonJs
- Part. 2: ES Module
- Part. 3: CJS 对比 ESM 表
- Code. 4: 获取文件路径
:::
这里的环境是指在 Node.js 下,有两种模块系统规范。简单来说就是导入导出的规范。两种规范语法不同。
CommonJS 是由 Mozilla 的工程师 Kevin Dangoor 于 2009 年 8 月改名的,原项目叫做 ServerJS,是在 2009 年 1 月创建的。
ES Module 简称 ESM,ESM 是 ES6 开发的规范。ES6 于 2015 年 6 月正式发布,ES Module 于 2019 年 5 月 21 日被 Firefox 67+,Safari 11.1+,Chrome 63+支持。这里的 ES = ECMAScript
。
模块系统规范 | 发布年份 |
CommonJS | 2009 年 |
ES Module | 2015 年 |
::: tip
vue 开发用的是 ES Module 规范。
node.js 默认是 CommonJS,如果要修改的话,需要在 package.json 的 type: "module",就是用 ES Module 了。
:::
常见规范有 AMD、CMD、UMD、CommonJS、ES Module
- node10 年查看大图
Node.js 开始是用的 CommonJs
Node.js 从 v13.2.0 之后也引入了规范的 ES Modules 机制
Part. 1: CommonJs
CommonJs 官网 https://www.commonjs.org/
这里都是最常用的方法,用多少写多少。
导出用法
导出原理
导入用法
Part. 2: ES Module
ES Module 脚本扩展名是 .mjs
,如果要改成.js
,需要在 package.json 的 type: "module"。
导出
导入
Part. 3: CJS 对比 ESM 表
vue.config.js 用的是 CJS,但是 vue 开发里面的代码都是用的 ESM。
- | CommonJS | ES Module |
年份 | 2009 年 | 2015 年 |
导出单属性 | | |
导出 Default | | |
导入-静态 | - | |
导入-动态 | | |
默认扩展名 | .js | .mjs |
Code. 4: 获取文件路径
默认是 当前目录 + 文件相对路径,这个默认不对,应该是 文件当前目录 + 文件相对路径。
- CommonJS 代码
- ES Module 代码
---------------------------------------------
生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。
↑面的话,越看越不痛快,应该这么说:
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
新博客 https://www.VuejsDev.com 用于梳理知识点