前端工程化之：ES Module

标准类型：官方标准

支持环境：node，浏览器

依赖类型：静态依赖，动态依赖

如何导出

 ES Module 分为两种导出方式：

• 具名导出（普通导出）：可以导出多个
• 默认导出：只能导出一个

一个模块可以同时存在两种导出方式，最终会合并为一个对象导出。

一、html中引入

 html 文件 script 标签中 type="module" 是指将引入的 js 文件当成一个模块进行引入。

<script src="./index.js" type="module"></script>

二、导出方式 

具名导出与默认导出 ESModule.js ：

export const a = 1 // 具名导出，常用
export function isOdd(a){
    return a % 2 !== 0
} // 具名导出，常用
export function sum(a,b){
    return a + b
} // 具名导出，常用

const b = 2
export { b } // 具名，名称与值都为b
const k = 10
export { k as temp } // 具名，名称为temp，值为k

// export default 3 // 默认导出，常用
// export default function c(){} // 默认导出，常用

// const d = 4
// export {d as default} // 默认

const e = 1,f = 2,g = 3
export {e,f,g as default} // 基本 + 默认

// 导出对象结果
/**
 * {
 *     a:1,
 *     isOdd:fn,
 *     sum:fn,
 *     b:2,
 *     temp:10,
 *     e:1,
 *     f:2,
 *     default:3
 * }
 */

三、导入方式

1. 静态导入 ：

 静态依赖：代码运行前就要分析出依赖关系。

// 仅运行一次该模块，不导入任何内容
import "模块路径"
// 常用，导入属性 a、b，放到变量a、b中。a->a，b->b
import { a,b } from "模块路径"
// 常用，导入属性default，放入变量c中。default->c
import c from "模块路径"
// 常用，default->c，a->a，b->b，default需要写在前面
import c,{a,b} from "模块路径"
// 常用，将模块对象放入到变量obj中
import * as obj from "模块路径"

// 导入属性a、b，放到变量temp1、temp2 中
import {a as temp1,b as temp2} from "模块路径"
// 导入属性default，放入变量a中，default是关键字，不能作为变量名，必须定义别名
import {default as a} from "模块路径"
//导入属性default、b，放入变量a、b中
import {default as a,b} from "模块路径"

注意：

静态导入的代码必须为在代码顶端，也不可放入代码块中。

另外，静态导入的代码绑定的符号是常量，不可更改。

例1： index.js 

import {isOdd,sum as add} from "./ESModule.js"
const result = add(1,2)
console.log(result) // 3

例2： ESModule.js 

export default {
    sum(a,b){
        return a+b
    },
    isOdd(a){
        return a % 2 !== 0
    }
}

  index.js 

import math from "./ESModule.js"

const result2 = math.isOdd(4)

console.log(result2) // false

2. 动态导入 ：

 动态依赖：代码运行过程中调用才会导入，分析依赖关系。

import("模块路径") // 动态导入，返回一个Promise，完成时的数据为模块对象

例： index.js 

// 动态导入1
setTimeout(()=> {
    // 返回一个promise
    import("./ESModule.js").then((math)=> {
        const result2 = math.isOdd(4)
        console.log(result2) // false
    })
},1000)

// 动态导入2
setTimeout(async()=>{
    const math = await import("./ESModule.js")
    const result1 = math.sum(1,2)
    console.log(result1) // 3
},2000)