ES_Module基础（一）

ES_Module简介

es_module是ECMA2015提出的模块化规范

需要做的是浏览器的本身支持es_module

webpack是模块化打包工具

因为JS没有模块化是它的痛点，所以产生了一些社区规范：CommonJS、AMD、CMD等

ES Module和CommonJS的模块化有一些不同之处

一方面它用了import和export关键字

另一方面采用了编译期的静态分析，并且也加入了动态引用的方式

ES_Module的导入和导出

ES Module模块采用export和import关键字来实现模块化

export负责将模块内的内容导出

import负责从其他模块导入内容

const name = "why"
const age = 18
function sayHello() {
  console.log("hello")
}

export {
  name,
  age,
  sayHello
}

这个导出不是作为对象，是作为标识符导出的 

//导入import
//在浏览器中使用ES_Module必须加上文件后缀
import { name, age , sayHello } from "./foo.js"

console.log(name)
console.log(age)
sayHello()

有时候导出需要给标识符起一个别名，为了防止撞名

const name = "why"
const age = 18
function sayHello() {
  console.log("hello")
}

export {
  name as fname,
  age,
  sayHello
}

还可以在定义的时候直接导出：

export const name = "why"

相对应的，导入的时候也可以起别名，这是给标识符起别名：

//导入import
//在浏览器中使用ES_Module必须加上文件后缀
import { name as fname, age , sayHello } from "./foo.js"

const name ="main"

console.log(name)
console.log(age)
sayHello()

还可以给整个模块起别名

import * as foo from "./foo.js"

在实际开发中，为了方便，一般会设定一个单独的index.js用作导出，这样就不用东一块西一块的了

想要什么直接从index.js中拿就行了

而index.js则可以直接这么写：

export * from './format.js'
export * from './parse.js'

default用法

前面的都是具名导出，我们来看一个没看过的default用法

默认导出export的时候可以不指定名字

在导入的时候不需要使用{}，并且可以自己来指定名字

它也方便我们和现有的 CommonJS等规范相互操作

导入：

import aaa from "./parse_lyric";

导出：

function parseLyric() {
    return ["歌词"]
}

//默认导出
export default parseLyric;

在一个模块中只能有一个默认导出哟

import函数

通过import加载一个模块，是不可以在其放到逻辑代码中的，比如在if中进行导入

那么为什么会存在这样的限制呢？

这是因为ES Module在被JS引擎解析的时候，就必须知道它的依赖关系

由于此时JS代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况

甚至拼接路径的写法也是错误的，因为必须要在运行时才能确定path的值

错误：

不过可以通过import函数的方式进行导入（动态加载模块）：

let flag = true;
if(flag) {
    const importPromise = import("./foo.js")
    importPromise.then((module) => {
        console.log(module.name)
        console.log(module.age)
        module.sayHello()
    })
    console.log("hello")
}

在此等情况下是异步的，输出结果：

import meta

import.meta是一个给JS模块暴露特定上下文的元数据属性的对象

它包含了这个模块的信息，比如这个模块的URL

这是在ES11中新增的特性

ES_Module的解析流程

ES_Module是怎么被浏览器解析并且让模块间可以相互引用的呢？

ES Module的解析过程可以划分为三个阶段：

阶段一：构建，根据地址查找js文件，并且下载，可以将其解析成模块记录

阶段二：实例化，对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址

阶段三：运行，运行代码，计算值，并且将值填充到内存地址中

代码共享方案

写了什么工具框架啊都开源出去，怎么开源呢？

要么就是放在官网，要么就是放在GitHub，放到官网上的我下载下来之后可以直接用了

但是如果它更新了新版本我又要去重新下载很不方便

那有没有方便的 方法呢？

有的兄弟，有的

可以把开发出的工具放到一个仓库里：

npm registry

有了npm之0125487/后就可以更方便的 下载东西了

npm install之后默认安装的是最新的版本

、切换版本什么的 也很容易

包管理工具npm

Node Package Manager，也就是Node包管理器

目前已经不仅仅是Node包管理器了，在前端项目也用它管理依赖的包

npm属于node的一个管理工具，所以需要先安装Node

在安装node的过程中就会自动安装npm工具了