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

你不知道的import 和 require

https://mp.weixin.qq.com/s/4l3kQWPudJdRUxlgHvJeuA