ESModule模块化开发

认识ESModule

◼ JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ECMA推出自己的模块化系统时，大家也是兴奋异常。
◼ ES Module和CommonJS的模块化有一些不同之处：
    一方面它使用了import和export关键字；
    另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；
◼ ES Module模块采用export和import关键字来实现模块化：
    export负责将模块内的内容导出；
    import负责从其他模块导入内容；
◼ 了解：采用ES Module将自动采用严格模式：use strict

案例代码结构组件

export关键字

  
// 导出方式三:在定义的同时可以给这个变量导出
// export const foo = "foo"
const foo = "foo"
// export const age = "18"
const age = "18"
// 导出 export 
export{
  foo,
  age
}
// 导出方式二:导出时给标识符起别名
// export{
//   foo as ffoo,
//   age as fage
// }

import关键字

//导入import
// 注意事项一:在浏览器中使用ESmodule时必须在文件后面加上.js
// import {foo,age} from "./bar.js"
// 导入方式二:导入时给标识符起别名
// import {foo as ffoo,age as fage} from "./bar/js"
//3.导入时可以给整个模块起别名
import * as foo from "./bar/js"
const name = "foo"
console.log(foo.foo,foo.age)

export和import结合使用

default用法

import函数用法

ES Module的解析流程

阶段一

阶段二和阶段三