CJS的module.exports 、 exports和ESM export default和 export详解

webpackg公共源码

function __webpack_require__(moduleId) {if (__webpack_module_cache__[moduleId]) {return __webpack_module_cache__[moduleId].exports;}var module = __webpack_module_cache__[moduleId] = { exports: {} };__webpack_modules__[moduleId](module, module.exports, __webpack_require__);return module.exports;}

结合源码分析以下问题:

  1. commonjs同时有 module.exports 、 exports 的情况 输出的一直都是 module.exports 导出的内容 ,exports 不生效

    分析:这里简化一下代码,可以结合require方法导入的函数,可以看到module.exports赋值后

    module.exports指向了新的变量,这里和第二个参数已经不是同一个对象了,后面exports.xx只是对临时变量进行赋值,并没有什么意义

    解决办法:
    1.统一用exports
    2.用module.exports,需要格外添加module.exports.xxx=value

    var __webpack_modules__ ={"./src/util/math.ts":(module, exports)=>{module.exports ={sum,sub}exports.sumM = sum;exports.subM = sub,}
    }
    
    • 1.esModule(后面简称ESM)模块用commonJS(简称CJS)的reqiure导入后会多包了一层default
    • 2.ESM export default导出从另一个模块导入后不能直接解构赋值,
    // esModule导出,主要代码
    export const formattedDate2 = (date: Date) => {return date;
    };export default {formattedDate,formattedDate2,
    }
    //index.jsimport esModule, { formattedDate2 } from "./util/format";
    // const { formattedDate } = esModule;
    console.log("esModule", esModule, formattedDate2);
    

    同样的简化源码

     var __webpack_modules__ ={"./src/util/format.ts":(__unused_webpack_module, __webpack_exports__, __webpack_require__)=>{__webpack_require__.d(__webpack_exports__, {"default": () => (__WEBPACK_DEFAULT_EXPORT__),formattedDate2,})const __WEBPACK_DEFAULT_EXPORT__ = ({formattedDate: formattedDate,formattedDate2: formattedDate2})}
    }var _util_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(./src/util/format.ts");console.log("esModule", _util_format__WEBPACK_IMPORTED_MODULE_0__["default"], _util_format__WEBPACK_IMPORTED_MODULE_0__.formattedDate2)
    

    这里注意直接导入的是获取_util_format__WEBPACK_IMPORTED_MODULE_0__["default"],而解构赋值是直接调用的_util_format__WEBPACK_IMPORTED_MODULE_0__这就是两者 export default 和 export的区别

    //ESM 特有__webpack_require__.d = function (exports, definition) {for (var key in definition) {if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });}}};// hasOwnProperty() 方法返回一个布尔值,表示对象自有属性(而不是继承来的属性)中是否具有指定的属性__webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
    

    再看 __webpack_require__.d函数对Module执行了什么操作,通过Object.defineProperty给exports分别声明defaultformattedDate2 属性 的getter方法和声明该属性可枚举

    注意这里没有导出setter方法,所以是不能直接修改导出的变量的,但是我们可以在模块导出setter方法去修改变量(我个人觉得有点像私有变量)。

    // esModule增加如下导出,
    let value = "old";
    const setName = (newValue: string) => {value = newValue;
    };export { value, setName };
    //编译的源码如下
    __webpack_require__.d(__webpack_exports__, {"default": () => (__WEBPACK_DEFAULT_EXPORT__),formattedDate2: () => formattedDate2,setName: () => setName,value: () => value
    }
    

这里回过头看问题就清晰了,问题一require导出ESM模块的默认导出一致(看的webpack教程说以前不一样,可能是webpack5修改的),问题2同上,默认导出的是default属性不能直接解构赋值的

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

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

相关文章

人工智能——机器学习概述

1. 人工智能 1.1. 概念 人工智能(Artificial Intelligence,AI),是新一轮科技革命和产业变革的重要驱动力量, [26]是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是智能学科重要的组…

【Ansible自动化运维】Ansible入门基础信息【安装配置、常用命令与模块】

介绍安装配置注意事项yum安装验证安装配置host配置主机清单配置主控端被控端 常用模块命令组成command模块shell模块copy模块script模块 日志信息最后 介绍 Ansible 是一个开源 IT 自动化引擎,可自动执行供应、配置管理、应用程序部署、编排和许多其他 IT 流程。它可…

Python 选择用类或方法做装饰器的场景

在Python中,我们可以使用方法或者类来实现装饰器。选择使用方法还是类作为装饰器,主要取决于具体的应用场景。 使用方法作为装饰器 当装饰器的功能相对简单,不需要保持任何状态信息时,使用方法作为装饰器是一个不错的选择。这种情况下,装饰器通常只是对被装饰函数进行一些额外…

YesPMP平台 | 活动有礼,现金奖励点击领取!

YesPMP众包平台在线发福利啦,活动火热开启,现金奖励等你来领,最高可领千元,赶快参与将奖励收入囊中,一起来了解活动细节吧! 一、活动内容: 活动一:【项目征集令】活动,…

两个变量交换值

a a ^ b ; b a ^ b ; a a ^ b ; 这段代码是一个常见的技巧,用于交换两个整数变量a和b的值,而不使用临时变量。这里使用了异或运算符(^),它会对两个整数的每一位执行异或操作。异或操作的定义是:相同为0&…

前端大文件上传 -- 上传文件到S3或本地服务器

特别提醒 大文件上传的文件切片逻辑, 包括如何将分片文件上传到本地服务器, 请查看之前的文章: 前端大文件上传 - 总结(Vue3 hook Web Worker实现,通过多个Worker线程大大提高Hash计算的速度), 本篇仅实现如何将大文件分块上传到S3. 后面写…

代码随想录打卡—day27—【回溯】— 回溯基础练习 4.15

1 39. 组合总和 39. 组合总和 我的AC代码&#xff1a; class Solution { public:vector<vector<int>> ans;vector<int> path;void dfs(int sum,vector<int>& candidates,int target,int start_idx){if(sum > target)return;if(sum target){a…

关于Wordpress的操作问题1:如何点击菜单跳转新窗口

1.如果打开&#xff0c;外观-菜单-菜单结构内&#xff0c;没有打开新窗口属性&#xff0c;如图&#xff1a; 2.在页面的最上部&#xff0c;点开【显示选项】&#xff0c;没有这一步&#xff0c;不会出现新跳转窗口属性 3.回到菜单结构部分&#xff0c;就出现了

2024年工程师职称水平能力测试考试难吗?

大家现在都知道&#xff0c;现在湖北中级和高级职称评审&#xff0c;都必须要先报名一个水平能力测试考试&#xff0c;水测考过了之后才能参加评审&#xff0c;那么很多人都不知道水测到底难不难&#xff1f;能不能考过&#xff1f;水测主要是考什么呢&#xff1f; 职称水平能力…

20240415金融读报:市场信贷不能过于宽松声音碳领域新增文件

1、市场普遍认为&#xff0c;在经济转型背景下&#xff0c;当前的社会融资规模和信贷增长有助于经济高质量发展&#xff0c;过于宽松并不利于经济发展。&#xff08;已经有这个声音了&#xff0c;是不是说明我们已经脱离了U型曲线的最低点&#xff0c;在或快接近其后半段的1/2处…

Rust 语言 GUI 用户界面框架汇总(持续更新)

拜登&#xff1a;“一切非 Rust 项目均为非法”&#x1f60e; 什么是 GUI 图形用户界面&#xff08;Graphical User Interface&#xff0c;简称 GUI&#xff0c;又称图形用户接口&#xff09;是指采用图形方式显示的计算机操作用户界面。 现在的应用开发&#xff0c;是既要功…

【python】flask操作数据库工具SQLAlchemy,详细用法和应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

【Linux系统编程】第三弹---基本指令(一)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、touch指令 2、mkdir指令 3、ls 指令 4、pwd命令 3、cd 指令 6、rmdir指令 && rm 指令 7、man指令 7、cp指令 …

在 PyCharm 中使用系统安装的 Python 和 Anaconda 的 Python什么区别

virtualenv environment &#xff1a; virtualenv 是一个用于创建独立 Python 环境的工具。它可以在同一个系统上创建多个相互独立的 Python 环境&#xff0c;每个环境都有自己的 Python 解释器和包库&#xff0c;从而可以实现不同项目之间的依赖隔离和版本控制。coda environm…

[已解决]问题:root.users.hdfs is not a leaf queue

问题&#xff1a;root.users.hdfs is not a leaf queue CDH集群报错&#xff1a; Exception in thread “main” org.apache.hadoop.yarn.exceptions.YarnException: Failed to submit application_1713149630679_0005 to YARN : root.users.hdfs is not a leaf queue 思路 …

海外媒体如何发布软文通稿

大舍传媒-带您了解海外发布新潮流 随着全球化的不断深入&#xff0c;越来越多的中国企业开始关注海外市场。为了在国际舞台上树立品牌形象&#xff0c;企业纷纷寻求与海外媒体合作&#xff0c;通过发布软文通稿的方式&#xff0c;传递正面信息&#xff0c;提升品牌知名度。作为…

【攻防世界】ics-07

<?php session_start();if (!isset($_GET[page])) {show_source(__FILE__);die(); }if (isset($_GET[page]) && $_GET[page] ! index.php) {include(flag.php); }else {header(Location: ?pageflag.php); } <?phpif ($_SESSION[admin]) {$con $_POST[con];$…

Redis: 集群

文章目录 一、单点Redis的问题二、主从架构1、概述2、集群结构3、主从数据同步原理&#xff08;1&#xff09;全量同步&#xff08;2&#xff09;增量同步 4、总结&#xff08;1&#xff09;全量同步和增量同步的区别&#xff08;2&#xff09;什么时候执行全量同步&#xff08…

绝地求生更新反作弊系统“ZAKYNTHOS”杀疯了

绝地求生的反作弊系统“ZAKYNTHOS”近期取得了显著的成绩。从2024年1月1日至3月3日&#xff0c;共有117,3588个违规账号被封禁&#xff0c;其中107,3317个账号因使用外挂而被永久封禁。 根据官方每周封禁数据公告&#xff0c;1月至3月每周的永久封禁违规账号平均数高达13万&am…

javafx实现音频播放功能

上链接&#xff1a; https://download.csdn.net/download/jasonhongcn/89146520