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

前端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.dtcms.com/a/201692.html

相关文章:

  • Jules 从私有预览阶段推向全球公测
  • 虚幻引擎5-Unreal Engine笔记之摄像头camera
  • R语言学习--Day04--数据分析技巧
  • 基于HTML的Word风格编辑器实现:从零打造功能完备的富文本编辑器
  • AI-02a5a7.神经网络-与学习相关的技巧-正则化
  • leetcode 合并区间 java
  • 【神经网络与深度学习】激活函数的可微可导
  • IDEA2025版本使用Big Data Tools连接Linux上Hadoop的HDFS
  • [面试精选] 0001. 两数之和
  • 【解决】SSH 远程失败之路由配置问题
  • laravel中如何使用Validator::make定义一个变量是 ,必传的,json格式字符串
  • 【git】在Windows上搭建git服务器
  • 使用Java实现Navicat密码的加密与解密
  • Python训练营打卡 Day31
  • 牛客网 NC14736 双拆分数字串 题解
  • 【windows】音视频处理工具-FFmpeg(合并/分离)
  • I2C 协议的理解以及在 OLED 上的应用
  • mac上安装 Rust 开发环境
  • 数据分析_商务运营考核指标体系搭建
  • 【爬虫】12306自动化购票
  • [原创](现代Delphi 12指南):[macOS 64bit App开发]: 如何获取目录大小?
  • os agent智能体软件 - 第三弹 - 纯语音交互
  • 解决npm install报错:getaddrinfo ENOTFOUND registry.nlark.com
  • 如何从不同位置将联系人导入 iPhone(完整指南)
  • 【520 特辑】用 HTML/CSS/JavaScript 打造浪漫炫酷的表白网页
  • 【HTML-3】HTML 中的水平线与换行:基础元素详解
  • 零售EDI:Belk Stores EDI需求分析
  • 使用 ARCore 和 Kotlin 开发 Android 增强现实应用入门指南
  • 安装PostgresSQL
  • 在 Kotlin 中,什么是内联函数?有什么作用?