10天进阶webpack---(2)webpack模块兼容性处理

news2024/11/6 18:19:39

回顾CMJ和ESM的区别

CMJ的本质可以使用一个函数概括

// require函数的伪代码
function require(path){
  if(该模块有缓存吗){
    return 缓存结果;
  }
  function _run(exports, require, module, __filename, __dirname){
    // 模块代码会放到这里
  }
  
  var module = {
    exports: {}
  }
  
  _run.call(
    module.exports, 
    module.exports, 
    require, 
    module, 
    模块路径, 
    模块所在目录
  );
  
  把 module.exports 加入到缓存;
  return module.exports;
}

所以我们平时在node环境上书写的代码其实是在运行在一个函数中的,我们使用的require函数其实也是函数的参数了,我可以在node环境中打印一下arguments

console.log(arguments.length)
console.log(arguments)

///输出
5 //参数个数
[Arguments] {
  '0': {}, //是module.exports
  '1': [Function: require] { //require函数
    resolve: [Function: resolve] { paths: [Function: paths] },
    main: {
      '9': [Function: internalRequire],
      id: '.',
      path: 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src',
      exports: {},
      filename: 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src\\a.js',
      loaded: false,
      children: [],
      paths: [Array]
    },
    extensions: [Object: null prototype] {
      '.js': [Function (anonymous)],
      '.json': [Function (anonymous)],
      '.node': [Function (anonymous)]
    },
    cache: [Object: null prototype] {
      'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src\\a.js': [Object]
    }
  },
  '2': { //module对象
    '9': [Function: internalRequire],
    id: '.',
    path: 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src',
    exports: {}, //这个第一参数是相等的
    filename: 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src\\a.js',
    loaded: false,
    children: [],
    paths: [
      'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src\\node_modules',
      'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\node_modules',
      'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\node_modules',
      'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\node_modules',
      'd:\\BaiduNetdiskDownload\\A渡一前端\\node_modules',
      'd:\\BaiduNetdiskDownload\\node_modules',
      'd:\\node_modules'
    ]
  },
  '3': 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src\\a.js', //文件路径
  '4': 'd:\\BaiduNetdiskDownload\\A渡一前端\\联系\\webpack学习\\1-8编译过程\\src' //文件所在文夹路径
}

根据require是一个函数可知,require必然是动态导入的,我们可在任何位置使用require进行模块导入。
ESM除了我们熟知的静态导入,动态导入(返回一个Prmise),还有一个比较奇特的特性,符号绑定,也就是说无论你导出的是一个对象还是一个基础类型的变量他们都是一块内存空间,并且导出的类型是常量。

面试题:CMJ和ESM的区别

参考答案:

  1. CMJ 是社区标准,ESM 是官方标准
  2. CMJ 是使用 API 实现的模块化,ESM 是使用新语法实现的模块化
  3. CMJ 仅在 node 环境中支持,ESM 各种环境均支持
  4. CMJ 是动态的依赖,同步执行。ESM 既支持动态,也支持静态,动态依赖是异步执行的。
  5. ESM 导入时有符号绑定,CMJ 只是普通函数调用和赋值

webpack怎么处理CMJ和ESM的导入和导出

由于webpack同时支持CommonJS和ES6 module,所以需要理解它们互操作时webpack是如何处理的。
如果导出和导入使用的是同一种模块化标准,打包后的效果就是标准的的模块化。
不同的模块化标准,webpack按照如下的方式处理。
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234431.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

034_Structural_Transient_In_Matlab结构动力学问题求解

结构动态问题 问题描述 我们试着给前面已经做过的问题上加一点有趣的东西。 结构静力学求解 当时求解这个问题,在最外面的竖直切面加载了一个静态的固定的力。下面我们试试看在上方的表面增加一个脉冲压力载荷。 采用统一的有限元框架,定义问题&…

简单的 docker 部署ELK

简单的 docker 部署ELK 这是我的运维同事部署ELK的文档,我这里记录转载一下 服务规划 架构: Filebeat->kafka->logstash->ES kafka集群部署参照: kafka集群部署 部署服务程序路径/数据目录端口配置文件elasticsearch/data/elasticsearch9200/data/elas…

TortoiseSVN小乌龟下载安装(Windows11)

目录 TortoiseSVN 1.14.7工具下载安装 TortoiseSVN 1.14.7 工具 系统:Windows 11 下载 官网:https://tortoisesvn.subversion.org.cn/downloads.html如图选 TortoiseSVN 1.14.7 - 64 位 下载完成 安装 打开 next,next Browse&#xf…

Python实例:爱心代码

前言 在编程的奇妙世界里,代码不仅仅是冰冷的指令集合,它还可以成为表达情感、传递温暖的独特方式。今天,我们将一同探索用 Python 语言绘制爱心的神奇之旅。 爱心,这个象征着爱与温暖的符号,一直以来都在人类的情感世界中占据着特殊的地位。而通过 Python 的强大功能,…

ENSP RIP动态路由

RIP(距离矢量路由协议)以网络中所有链路的距离和矢量为依据计算最佳路径,是第一个动态路由协议。条数作为唯一的度量单位。默认开启水平分割(从一个路由接口学到的路由信息,便不在从这个接口发送出去)防止路…

Qt 练习做一个登录界面

练习做一个登录界面 效果 UI图 UI代码 <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Dialog</class><widget class"QDialog" name"Dialog"><property name"ge…

C++——priority_queue模拟实现过程中的优化

前言的前言&#xff1a; 大佬写博客给别人看&#xff0c;菜鸟写博客给自己看&#xff0c;我是菜鸟。 前言&#xff1a; 1.priority_queue&#xff08;优先队列&#xff09;的底层原理和堆极其相似&#xff0c;因此在模拟实现的过程中&#xff0c;主要借助堆的思想取完成&…

蓝桥杯真题——三角回文数(C语言)

问题描述 对于正整数 n, 如果存在正整数 k 使得 n123⋯kk(k1)2n123⋯kk(k1)/2​, 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066123⋯36366066123⋯363 。 如果一个整数从左到右读出所有数位上的数字, 与从右到左读出所有数位 上的数字是一样的, 则称这个数为回文数…

密码学知识点整理一:密码学概论

密码学是什么&#xff1f; 密码学是一门研究编制密码和破译密码的技术科学。 密码学&#xff0c;作为信息安全的核心技术之一&#xff0c;其重要性在于能够为信息传输提供安全保障&#xff0c;确保数据在存储或传输过程中的机密性、完整性与真实性不被破坏。从古至今&#x…

51单片机教程(五)- LED灯闪烁

1 项目分析 让输入/输出口的P1.0或P1.0~P1.7连接的LED灯闪烁。 2 技术准备 1、C语言知识点 1 运算符 1 算术运算符 #include <stdio.h>int main(){// 算术运算符int a 13;int b 6;printf("%d\n", ab); printf("%d\n", a-b); printf("%…

Unity中实现伤害飘字或者提示飘字效果(DoTween实现版本)

&#xff01;&#xff01;&#xff01;在实现以下效果之前&#xff0c;一定要往项目中导入DoTween插件。 一、搭建测试场景 1、在场景中新建一个带有Text组件的游戏物体A&#xff0c;并把这个游戏物体A中Text组件的Color属性中alpha值为0&#xff0c;让文字在场景中隐藏。 …

其他节点使用kubectl访问集群,kubeconfig配置文件 详解

上述两种方式&#xff1a;可使用kubectl连接k8s集群。 $HOME/.kube/config 是config文件默认路径&#xff0c;要么直接定义环境变量&#xff0c;要么就直接把文件拷过去 config文件里面&#xff0c;定义了context&#xff0c;里面指定了用户和对应的集群信息&#xff1a; ku…

【vim文本编辑器gcc编译器gdb调试器】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、vimvim安装vim常用快捷键vim使用vimtutor zh文档 二、gcc编译器安装gcc工具编译源代码 三、gdb调试器gdb安装gdb常用指令gdb简单上手使用gdb的单步调试功能 总结…

陀螺仪BMI323驱动开发测试(基于HAL库SPI通信)

参考资料 编写代码 读取芯片ID void BMI160_Init(void) {uint16_t chipID BMI323_read(BMI160_REG_CHIP_ID);debug("BMI323芯片ID为0x%x;", chipID);if (chipID ! 0x43){debug("未检测到BMI323;");}elsedebug("检测到陀螺仪BMI323;");u8 buf_…

【MySQL初阶】--- MySQL在Ubuntu环境下安装

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; MySQL 本篇博客博主采用的是ubuntu 22.04的系统按照MySQL&#xff0c;且在root用户下安装。 &#x1f3e0; MySQL安装 1. 更新系统的软件包列表 sudo a…

Charles简单压力测试

1.接口请求次数&#xff0c;并发量&#xff0c;请求延迟时间均可配置 1.1选中需要进行测试的接口&#xff0c;鼠标右键选中【repeat advance】 2.设置并发参数 下面的图中&#xff0c;选择了1个接口&#xff0c;每次迭代中1个接口同时请求&#xff0c;迭代1000次&#xff08;…

【大模型LLM面试合集】大语言模型架构_chatglm系列模型

chatglm系列模型 1.ChatGLM 1.1 背景 主流的预训练框架主要有三种&#xff1a; autoregressive自回归模型&#xff08;AR模型&#xff09;&#xff1a;代表作GPT。本质上是一个left-to-right的语言模型。通常用于生成式任务&#xff0c;在长文本生成方面取得了巨大的成功&a…

从 vue 源码看问题 — 你知道 Hook Event 吗?

前言 在之前的几篇文章中&#xff0c;都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的&#xff0c;比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下: 那么接下来一起来了解下到底什么是 Hook Event &#xff1f; Hook Event 是什…

html练习2

实现下列图片的效果 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}#menu {background-color: #0c0048;width: 100%;height: 50px;margin: auto;…

计算机视觉常用数据集Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Cityscapes数据集的时候花了一番功夫&#xff0c;因为官网下载需要用公司或学校邮箱邮箱注册账号&#xff0c;等待审核通过后才能进行下载数据集。并且一开始我也并不了解Cityscapes的格式和内容是什么样的&#xff0c;现在我弄明白后写下这篇文章&#xff0c;用于记录…