前端mjs和js文件区别,mjs和cjs区别---.es.js和.mjs的区别

https://www.cnblogs.com/jocongmin/p/18432236

同一份配置如下,一般打包出来的结果时是一样的,只不过扩展名不一样

export default defineConfig({build: {rollupOptions: {output: [// 同一份配置,仅扩展名不同{ format: 'es', entryFileNames: '[name].mjs' },{ format: 'es', entryFileNames: '[name].es.js' },],},},
});
# 扩展名	                  用途	                                     内容本质
.mjs	             Node.js 官方约定的 ESM 文件	                   ES Module 代码
.es.js	             社区约定的 ESM 打包文件	                       ES Module 代码
相同点:
两者均为 ES Module 规范,支持 import/export,可被现代浏览器和 Node.js(需配置)直接使用。不同点:
扩展名的选择通常是为了 语义化区分(例如库作者通过 .es.js 表明这是打包后的 ESM 版本)。

4. 实际场景建议
(1)库开发(npm 包)---开发npm包,通过import导入方法  import  {xxx} from 'xxx'  ,使用.mjs
推荐 .mjs:
Node.js 原生支持 .mjs 作为 ESM 文件,无需 "type": "module"。
示例 package.json:
{"type": "commonjs",  // 默认"main": "lib.cjs",   // CommonJS"module": "lib.mjs", // ESM"exports": {".": {"import": "./lib.mjs", // Node.js ESM"require": "./lib.cjs" // CommonJS}}
}
(2)浏览器环境,在浏览器中引入js文件  <script type="module" src="xxx.es.js"></script>
推荐 .es.js:
社区更熟悉此约定(如 lodash.es.js),且浏览器只关心 type="module",不依赖扩展名

总结
默认情况下,.mjs 和 .es.js 文件内容相同(如果配置一致)。

扩展名的选择取决于生态习惯:

用 .mjs:Node.js 原生兼容性更好。

用 .es.js:更符合前端打包惯例(如工具链生成的 ESM 包)。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文掌握vue3基础,适合自学入门案例丰富

Vue3 本文从Vue3的基础语法出发&#xff0c;全面系统的介绍了Vue3的核心概念与应用&#xff0c;旨在帮助自学者更轻松地掌握Vue3。文章内容由浅入深&#xff0c;从通过CDN引入Vue3开始&#xff0c;逐步介绍了组合式API、模块化开发、以及常见的Vue3指令和功能并从单个html的使…

如何自学FPGA设计?

众所周知&#xff0c;FPGA设计自学难度不小&#xff0c;更不存在速成的捷径。这里简单说一下学习的规划&#xff0c;希望能给入门者提供一些方向。 学会相应的知识 不论是科班毕业还是理工科专业出身&#xff0c;想要入行FPGA开发&#xff0c;基础知识必须扎实。尤其是在高校…

Python爬虫(30)Python爬虫高阶:Selenium+Scrapy+Playwright融合架构,攻克动态页面与高反爬场景

目录 一、背景&#xff1a;动态页面与反爬技术的崛起二、技术融合架构设计1. 核心组件分工2. 架构图示3. 关键技术点 三、代码实现&#xff1a;分步详解1. 环境配置2. 核心代码结构3. Scrapy项目集成4. Playwright增强功能示例 四、总结&#xff1a;技术融合的优势与挑战1. 优势…

STM32之定时器

一、内核嘀嗒定时器的原理与应用 基本概念 定时器是STM32中常用的外设&#xff0c;一般定时器的基本功能就是定时&#xff0c;而在Cortex M3/M4内核中也包含一个简单的定时器&#xff0c;就是系统嘀嗒定时器(Systick)&#xff0c;它是属于CM4内核的一个外设&#xff0c;内嵌在…

使用 Java 开发 Android 应用:Kotlin 与 Java 的混合编程

使用 Java 开发 Android 应用&#xff1a;Kotlin 与 Java 的混合编程 在开发 Android 应用程序时&#xff0c;我们通常可以选择使用 Java 或 Kotlin 作为主要的编程语言。然而&#xff0c;有些开发者可能会想要在同一个项目中同时使用这两种语言&#xff0c;这就是所谓的混合编…

云原生安全:错误策略S3存储桶ACL设置为Everyone:FullControl

🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 ——从基础到实践的深度解析 1. 基础概念 S3存储桶与ACL Amazon S3(Simple Storage Service)是AWS提供的对象存储服务,支持存储和检索任意规模的数据。ACL(访问控制列表…

20. 自动化测试框架开发之Excel配置文件的IO开发

20.自动化测试框架开发之Excel配置文件的IO开发 一、核心架构解析 1.1 类继承体系 class File: # 文件基类# 基础文件验证和路径管理class ExcelReader(File): # Excel读取器# 实现Excel数据解析逻辑1.2 版本依赖说明 # 必须安装1.2.0版本&#xff08;支持xlsx格式&#…

嵌入式学习的第二十三天-数据结构-树+哈希表+内核链表

一、树&#xff08;一对多&#xff09; 1.树的定义 树&#xff1a;n&#xff08;n>0&#xff09;个结点的有限集合。n 0 ,空树。 2.在任意一个非空树中&#xff0c; (1)&#xff0c;有且仅有一个特定的根结点 (2)&#xff0c;当n>1 时&#xff0c;其余结点可分为m个…

【C++】map和multimap的常用接口详解

map和multimap的文档&#xff1a;<map> - C Reference 1.map类的介绍 map 有两个模板参数&#xff0c;是 key/value的场景。 这里的Key就是key&#xff0c;T就是value&#xff0c;命名不同而已。map默认要求Key⽀持⼩于⽐较&#xff08;升序&#xff09;&#xff0c;如…

sqli-labs第九关—‘时间盲注

一&#xff1a;判断闭合类型 先按照之前的判断方式判断&#xff0c;发现无论输入什么都显示You are in.......... 可以考虑使用时间盲注&#xff1a; 二&#xff1a;时间盲注Time-based Blind&#xff1a; 1.解释&#xff1a; 通过时间延迟判断结果 2.核心原理&#xff1a…

先说爱的人为什么先离开

2025年5月19日&#xff0c;15~23℃&#xff0c;贼好的一天&#xff0c;无事发生 待办&#xff1a; 2024年税务申报 《高等数学2》取消考试资格学生名单 《物理[2]》取消考试资格名单 5月24日、25日监考报名 《高等数学2》备课 《物理[2]》备课 职称申报材料 教学技能大赛PPT 遇…

(10)python开发经验

文章目录 1 cp35 cp36什么意思2 找不到pip3 subprocess编码错误4 导出依赖文件包含路径5 使用自己编译的python并且pyinstall打包程序 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;Qt开发 &#x1f448;&#x1f449;python开发 &#x1f448; 1 cp35 cp36什…