模块化之ESM

模块化

CommonJS规范

1. 一个文件就是一个模块
2. 每个模块都有单独的作用域
3. 通过module.exports导出成员
4. 通过require函数载入模块

CommonJS是以同步模式加载模块

模块化的最佳实现

• 在Node.js环境中采用CommonJS的规范
• 在浏览器环境采用ES Modules规范

那么这里我们主要介绍ES Modules的使用

ES Modules 的特性

• 首先介绍一下ES Modules都有哪些特性

Tips: 以下ES Module 将简称为ESM

1. 通过给script添加 type = module 的属性,就可以以ESM的标准执行其中的JS代码了
2. 每个ESM 模块都是单独的私有作用域
3. ESM 自动采用严格模式(“use strict”)内部可以不用再定义
4. ESM 是通过 跨域(CORS)的方式请求外部js模块的(所以需要服务端支持跨域,普通script标签不存在跨域)
5. ESM 的script标签会延迟执行脚本

ESM 的导出和导入

导出

• 一一对应导出导入的语法

export const name = '导出变量name'

export function hi() {
   
    console.log("导出一个函数 hi")
}

export class Person {
   } // 导出一个类

也可以这样写

export {
    name, hi, Person }

as关键词可以重命名,引入的时候就需要引as重命名的变量

export {
   
    name