当前位置: 首页 > news >正文

【工程化】CJS 和 ESM

common js

require 函数的原理伪代码:

function require(path) {if (该模块有缓存) {return 该模块的缓存}function _run(exports, require, module, __filename, __dirname) {// 模块代码}// module.exports 即为模块导出的对象var module = { exports: {} };_run.call(module.exports, module.exports, require, module, __filename, __dirname);// 将 module.exports 加入缓存return module.exports;
}
console.log(arguments.length)  // 5 // 刚好是 _run 的五个参数
console.log(this)  // {}

使用require:

const m = require('./1')
console.log(m)  // { a: 1, b: 2 }
this.a = 1
this.b = 2  // 等同于 exports.b = 2 或者 module.exports.b = 2
// 或者也可以直接 将 a, b 都放入对象中 统一  module.exports = {a: 1, b: 2}

es module

// 静态依赖
import a from './a.js'// 动态依赖
import('./a.js').then(m => {console.log(m) // m 就是 ./a.js 导出的模块
})export default 'hello world' // 默认导出
export const a = 123 // 具名导出

符号绑定:

image.png

image.png

区别

  1. CMJ 是社区标准,ESM 是官方标准
  2. CMJ 是使用API实现的模块化,ESM 是使用新语法实现的模块化
  3. CMJ 仅在node环境中支持,ESM 各种环境均支持
  4. CMJ 是动态的依赖,同步执行。ESM 既支持动态,也支持静态(只能写在模块的最顶部,在代码运行前就要确定依赖关系),动态依赖是异步执行的。
  5. ESM 导入时有符号绑定(直接导入引用,所以对引用进行操作,原模块也会跟着改变),CMJ 只是普通函数调用和赋值
http://www.lryc.cn/news/350975.html

相关文章:

  • 记录:mac pro 16-inch,2019安装ubuntu双系统
  • WordPress主题 7B2 PRO 5.4.2 免授权开心版源码
  • GPT‑4o普通账户也可以免费用
  • 复制即用!纯htmlcss写的炫酷input输入框
  • 前端 CSS 经典:弧形边框选项卡
  • 前端面试题日常练-day21 【面试题】
  • 几起 Linux 问题解决分享
  • LeetCode题解:9. 回文数,翻转一半数字,JavaScript,详细注释
  • 微博:一季度运营利润9.11亿元,经营效率持续提升
  • Mysql总结1
  • three.js能实现啥效果?看过来,这里都是它的菜(05)
  • innerText和innerHTML的区别
  • O2OA(翱途)开发平台数据统计如何配置?
  • 网关过滤器使用及其原理分析
  • jiebaNET中文分词器
  • springboot3项目练习详细步骤(第四部分:文件上传、登录优化、多环境开发)
  • 视觉里程计的融合方法及优缺点分析
  • SQL常用基础语句(一)-- FGHIJ开头
  • 大语言模型量化方法对比:GPTQ、GGUF、AWQ 包括显存和速度
  • 实现本地访问云主机,以及在云主机搭建FTP站点
  • 存储+调优:存储-Cloud
  • 海山数据库(He3DB)线程池方案详解
  • K8s 高级调度
  • 数据猿携手IDC Directions 2024:探索中国ICT市场新趋势
  • 前端开发工程师——ajax
  • uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
  • 最大连续1的个数(滑动窗口)
  • Spring Cloud 框架的应用详解
  • C语言 数组——向函数传递数组
  • 数据链路层简单介绍