前端模块化

模块化规范

• 在node中遵循CommonJS规范
• 在浏览器端遵循ES Module规范

ES Module

在script标签添加type='module’属性，就可以让浏览器以ES Module的标准执行script标签内的JS代码
1、 特点：

• ES Module自动采用严格模式，会忽略掉js文件头部的’use strict’
• 每个ES Module 都是运行在独立的私有作用域中
  意思就是ES Module规范的代码中的变量，只在当前Module中有效。这样做的最大好处就是避免了全局变量污染作用域的问题
• ES Module 是通过CORS的方式请求外部JS模块的
  意思就是请求的外部JS接口务必支持cors
• ES Module的script标签会延迟执行
  相当于script标签的defer特性，这样做的目的是不会阻塞其他代码的执行

2、ES Module 的核心功能 （使用React或Vue的同学，import和export的用法再熟悉不过了）
import 和 export
在import 和export 的时候可以使用as 关键字 对模块中的成员进行别名的操作
注意事项：

• export {} 不是导出对象，import {} 不是解构。这是语法规定必须这么写
• export 导出的是引用关系而不是导出一个拷贝后的值，export导出的是只读的

3、ES Module 兼容性处理方案
通过babel去转换，让浏览器直接支持ES Module 的绝大部分特性

4、在node中使用ES Module

• 在高版本的node中ES Module 还处于试验阶段，目前不适用生产阶段

j首先s文件要以mjs为扩展名进行命名

启动的命令

node --experimental-modules index.mjs

5、在node原生环境中ES Module 与 CommonJS 之间相互引用

• 在ES Module中可以import 导入CommonJS 规范的代码，但是仅仅支持import默认的方式，也就是说CommonJS规范的代码必须是exports.default={}的形式
• 在CommonJS模块中不能通过require的方式载入ES Module规范的代码