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

回顾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.xdnf.cn/news/2995.html

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

相关文章

【STM32】NVIC / EXTI / AFIO 介绍

文章目录 中断系统NVIC简介NVIC基本结构NVIC优先级分组EXTI外部中断EXIT基本结构AFIO复用IO口EXTI内部框图 AFIO / EXTI / NVIC 相关函数AFIO相关函数EXTI相关函数NVIC相关函数 旋转编码器简介对射式红外传感器计次接线图CountSensor(传感器)驱动程序封装…

【Linux内核大揭秘】程序地址空间

文章目录 什么是程序地址空间地址空间的组成虚拟内存技术 如何理解程序地址空间页表页表的细节关于堆区 在Linux中如何查看各个分段的信息总结 什么是程序地址空间 程序地址空间是一个程序在执行期间可以访问的内存范围。它由操作系统为每个进程分配,以确保进程之间…

nginx代理出现的请求头中获取不到acc_token问题

1.问题 程序开发完成之后,发现页面登录之后,获取不到用户信息。发现时没有获取到token信息。本地程序开发完成,后端服务成功署到服务器。通过云服务器开放对应的端口,使用本地的前端服务,直接连接服务器后端服务&…

WordPress之generatepress主题安装

1.打开主题列表 2.如果没有自己需要主题点击安装新主题 点击安装并启用 3.不喜欢的 主题可以点击主题进去删除 4.主题自定义编辑 打开自定义,可以修改布局,颜色,排版等等

MySQL之JDBC入门详解

01-JDBC入门 一、JDBC概念 jdbc : java database connection , java数据库连接 jdbc是sun公司定义的java程序访问数据库的规范。 二、JDBC操作需要6步 三、入门程序 1、使用eclipse打开一个新的工作空间 2、切换到java视图界面 3、创建java工程:01-jdbc-helloworl…

BackTrader-Commission 06

Backtrader 策略实例,该部分内容通过使用backtrader对常用的策略实例的编写,提高和熟悉backtrader的实际场景的使用。 [Backtrader]实例:均线策略 [Backtrader] 实例:MACD策略 [Backtrader] 实例:KDJ 策略 [Backtrader] 实例:RSI 与 EMA 结合 [Backtrade…

WordPress伪静态设置

为什么要设置WordPress伪静态,搜索引擎优化(SEO)中,静态URL通常被认为更易于搜索引擎爬虫抓取和索引,有助于提高网站的搜索引擎排名。 WordPress伪静态设置方法主要依赖于服务器环境,以下是针对不同服务器…

sublime python出现中文乱码怎么办

一、乱码现象 利用sublime自带编译快捷方式ctrlB会出现中文乱码的情况。 print("没有循环数据!") print("完成循环!") 二、寻找原因 1、由于之前我已经安装了插件ConvertToUTF8,排除文本编码错误问题。 2、相同的代码在插件sublimerepl搭建的…

【ARM Linux 系统稳定性分析入门及渐进 1.2 -- Crash 工具依赖内容】

请阅读:【Linux 维测及Crash使用专栏】 文章目录 Prerequisites1. 内核对象文件2. 内存镜像3. 平台处理器类型4. Linux 内核版本 Prerequisites crash 工具需要依赖下面的内容: 1. 内核对象文件 vmlinux 文件:需要一个 vmlinux 内核对象文件&#xff…

电路设计过程就是波形整形过程

这种说法有一定的道理。在电路设计中,常常需要对输入的电信号波形进行处理和调整,以满足后续电路或系统的要求,这在某种程度上可以理解为波形整形的过程。 例如,在数字电路中,输入的信号可能存在噪声、干扰或者不符合…

计算机视觉-显著性检测实验报告

实验四 显著性检测实验 一、实验目的 掌握多种显著性检测算法的基本原理。学会使用计算机程序实现不同的显著性检测方法。通过对比不同的显著性检测算法,理解各算法的优缺点。分析显著性检测在实际图像处理应用中的效果和局限性。 二、实验内容和要求 1&#x…

05-Dubbo的应用及注册和SPI机制

05-Dubbo的应用及注册和SPI机制 Dubbo 的服务注册中应用级注册优化 Dubbo 的注册中心 Dubbo 支持很多种注册中心,支持的主流注册中心包括:ZooKeeper、Nacos、Redis Dubbo 需要引入注册中心依赖,并且配置注册中心地址,这里以 ZooKe…

【 AI 大模型:重塑软件开发的新势力】

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

南宁周边乡村游微信小程序ssm+论文源码调试讲解

第二章 开发工具及关键技术介绍 2.1微信开发者工具 微信开发者工具现在已经被小程序开发团队开发运行,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号…

ssm校园二手交易管理系统+vue

系统包含:源码论文 所用技术:SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习,获取源码看文章最下面 需要定制看文章最下面 目 录 1 绪论 1 1.1 选题背景 1 1.2 选题意义 1 1.3 研究内容 2 2 系统开发技术 3 2.1 MySQL数…

DB-GPT系列(二):DB-GPT部署(镜像一键部署、源码部署)

一、简介 DB-GPT 是一个开源项目,其将大语言模型 LLM 与数据库紧密结合。该项目主要致力于探索如何让预训练的大规模语言模型(例如 GPT)能够直接与数据库进行交互,从而生成更为准确且信息丰富的回答。 DB-GPT部署后能否直接使用…

掌握 Jest 配置文件:优化单元测试的灵活性与可维护性

引言 在现代软件开发中,单元测试是确保代码质量和稳定性的关键步骤。Jest 是一个广泛使用的 JavaScript 测试框架,提供了丰富的配置选项来优化测试过程。通过配置文件,开发者可以更灵活地控制测试环境,确保测试的可靠性和可维护性…

网络:IP分片和组装

个人主页 : 个人主页 个人专栏 : 《数据结构》 《C语言》《C》《Linux》《网络》 《redis学习笔记》 文章目录 前言16位标识,3位标志,13位片偏移分片组装总结 前言 对于IP分片和组装的总结 当一个IP数据报的大小超过网络的MTU(最…

Node.js:Express 中间件 CORS 跨域资源共享

Node.js:Express 中间件 & CORS 中间件全局中间件局部中间件分类错误级中间件内置中间件 CORS原理预检请求 中间件 中间件是不直接接收请求,也不直接发送响应,而是在这之间处理一个中间过程的组件。 当一个请求到来,会经过多…

【VScode】中文版ChatGPT编程工具-CodeMoss!教程+示例+快捷键

文章目录 1. 多模型选择2. 编辑快捷键3. 历史记录收藏 CodeMoss使用教程1. 安装CodeMoss插件2. 配置AI模型3. 使用快捷键4. 进行代码优化与解释5. 收藏历史记录 总结与展望 在当今快速发展的编程世界中,开发者们面临着越来越多的挑战。如何提高编程效率,…