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

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

news 来源：原创 2025/5/21 5:38:12

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 包）。