commonJs 规范,nodejs 中提出的标准:
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过module.exports 导出成员
- 通过require函数载入模块
- 在node中没问题:commonjs 以同步的模式加载模块, 启动时加载模块, 执行过程不会加载,只会使用
- 在浏览器中有问题:每次页面加载,导致大量同步模式请求出现,早期使用amd , 出现对应的库是require.js, sea.js + CMD, 缺点是 使用起来相对复杂,模块js文件请求频繁
AMD:
CMD:
现代化统一规范:
5. eSModule 特性
目前市面上许多浏览器已经支持esmodule, 只需要通过给页面中的标签script 添加 type="module"这样的属性,就可以直接使用ESmodule 的标准执行js 代码, 几个特征
- ESM 自动使用严格模式, 忽略 use script
- 每个ES module 都运行在私有作用域中, 两个
- ESM中外部js 文件时通过CORS的方式去请求的,这就意味着我们去请求的地址,如果不是同源的,就需要在响应头中提供有效的CORS 标头, 并且cors不支持文件的形式访问,必须用http-server 的方式让文件工作起来
- ESM的script 标签会延迟执行脚本 ,相当于defer属性(网页渲染完成再执行脚本)
6、7. ESModule 的导出和导入
import 和 export (as 重命名) 注意事项:
- 不是export 对象,import也不是 解构
- 对外暴露的时引用,比如 导出a, a 原本等于 3, 一秒后变成5, import a 之后,第一次读取的是3, 一秒后读取的是5, 这点和commonjs 不同
- 对外暴露的引用是只读的,也就是说不能在外部文件修改这个值(尝试修改,会报错)
10 ES module 浏览器兼容性 polifill
PS: module 模块,可以在unpkg.com 中获取, 在浏览器中unpkg.com/模块名字/ 这样就可以找到对应的文件所在地址,比如unpkg.com/jquery/ , 后面的斜杆不能省略,省略之后就会进入到jquery默认版本的文件,而不是去到文件夹下,找到所有版本的文件
11 ES module in nodejs
node 版本大于8.5 直接在nodejs 中使用esmodule ,需要做两件事
- 修改扩展名.js 为.mjs
- 启动node时,需要加上一个参数 --experimental-modules
12 es module in nodejs 与 commonjs
ESM 中没有 COMMonJS 中的那些模块全局成员了
13 es module in node.js 通过 package.json
在package.json 中添加{type: "module"}, 这样项目下的所有文件以es module 形式工作了,不需要把后缀名改为 .mjs 了, 但是,如果需要在项目下使用 commonjs 的文件,就需要将.js后缀改为 .cjs
14 es module in node.js 通过 babel
或者使用.babelrc