前端模块化(CJS,ESM)浅显笔记

1.CommonJS

简称CJS，是一种规范，早期用在服务端

规范： 模块中导出内容：exports

模块中导入内容：require

Node中实现了commonjs可以使用，而浏览器不可以直接使用

a.js

const num=12 exports.num=num 开发中常用写法：module.exports={num}

b.js

直接获取导出的对象 const a= require("./a.js") console.log(a.num)

使用解构导入 const {num} require (".a.js")

CommonJS规范缺点：

CommonJS加载模块是同步的，意味着只有等到对应的模块加载完毕，当前模块的内容才能被运行

2.ES module

ECMA2015年提出来的模块化

历览器本身支持es module

1.导入导出

a.js

const name="cjddm" 导出方式

0. export {name}
1. 导出时给标识符起一个别名(一般不在导出时起别名) export {name as aname}
2. export const age = 18

b.js

导入方式

0. import {aname} from './a.js'
1. import {name as aname} from './a.js' //导入时起别名，常用
2. import * as foo from './a.js' //导入时给整个模块起别名

console.log(aname,name，foo.aname)

2.导出方式优化：

情况：在工具类文件夹下存在多个文件，可以创建一个index.js文件用来统一导出方法

0. export {num1,num2} from './format.js'
1. export * from './format.js'

3.default默认导出：

export default function(){console.log(‘导出一个方法’)} //一个模块只能有一个默认导出

import aaa from './a.js' //名字可以自定义且可以省去大括号

5.import函数

import {} from './foo.js' 属于导入声明语法，不能写在逻辑代码中，只可以写在js代码顶层

如果要在某个逻辑成立时才去导入某个模块，就可以使用import函数

const importPromise=import('./foo.js') //返回的是一个promise importPromise.then(res=>{ console.lo(res.name,res.age) })