nodejs,esm,ecma,mjs,cjs,js,Node.js — Run JavaScript Everywhere(https://nodejs.org/en)

链接

模块创建方式(require 方式)

catA.js

exports.jump=()=>"jump";
exports.name="tom";

catB.js

const jump=()=>"jump";
const name="tom";

// module.exports.name=name;
// module.exports.jump=jump;
// OR
module.exports={
    name,
    jump,
}

module.exports和exports在 Node.js 模块中都有其用途，选择使用哪个取决于具体的情况和代码风格。

module.exports是更基本和直接的方式来导出模块的属性和方法。它可以用于定义模块的导出内容。

优点：

明确地定义模块的导出内容。
可以导出复杂的数据结构或对象。

exports是对module.exports的一个引用，允许在模块内部对导出的内容进行修改。

优点：

在模块内部更方便地操作导出的属性和方法。

然而，使用exports时需要注意一些细节，例如：

不能直接重新赋值exports，而应该通过它来修改导出的内容。
对于复杂的导出结构，可能不如直接使用module.exports清晰。

一般来说，如果导出的内容相对简单，或者需要在模块内部方便地操作导出的属性和方法，可以使用exports。否则，使用module.exports可以提供更清晰的模块导出定义。

无论使用哪种方式，重要的是保持代码的一致性和可维护性，以确保模块之间的正确交互和代码的可读性。

综上所述，module.exports 更有性价比。

模块加载方式(require 方式)

方式一：
main.js

const catA = require('./module-nodejs/catA')
const catB = require('./module-nodejs/catB')

console.log(catA.name);
console.log(catA.jump());

console.log(catB.name);
console.log(catB.jump());

方式二
main.js

// 冒号后面是取别名，因为方法名和属性名重复了
const {name:name1,jump:jump1} = require('./module-nodejs/catA')
const {name:name2,jump:jump2} = require('./module-nodejs/catB')

console.log(name1);
console.log(jump1());

console.log(name2);
console.log(jump2());

import...from... 形式

模块定义

需要以 .mjs 结尾

catC.mjs

export const jump=()=>"jump";
export const name="tom";

模块使用

nodejs使用

main.mjs

import {name,jump} from './module-nodejs/catC.mjs'

console.log(name);
console.log(jump());

不改后缀名也可以在 package.json 加上 type:"module"属性

package.json

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^18.0.6",
    "node-fetch": "^3.2.6"
  },
  "type": "module" //这里
}

浏览器使用

JavaScript模块- JavaScript| MDN --- JavaScript modules - JavaScript | MDN
mdn/js-examples: Code examples that accompany the MDN JavaScript/ECMAScript documentation

catB.mjs

let hw="hellooooooooooooo woooooooooorld";
export default hw;

catC.mjs

import hw2 from './catB.mjs';

const jump = () => "jump";
const name = "tom";
let hw = hw2;

export {
    name,
    jump,
    hw
}

export default {
    name,
    jump,
    hw
}

index.js

import catC from './mods/catC.mjs'
import catD from './mods/catC.mjs'
import {name as n2,jump,hw} from './mods/catC.mjs'
import catE from 'https://example.com/catC.js'
debugger;
let d1= document.querySelector("#d1");
let d2= document.querySelector("#d2");
let d3= document.querySelector("#d3");

d1.innerHTML=n2;
d2.innerHTML=catC.jump();
d3.innerHTML=catC.hw;

index.html

importmap可以让前端使用nodejs的模块

<script type="importmap">
    {
      "imports": {
        "https://example.com/catC.js":"./mods/catC.mjs"
      }
    }
  </script>
  <script type="module" src="script.js"></script>

.js：传统的JavaScript文件

.js是JavaScript的默认文件后缀，也是最常用的文件类型。它通常用于在Web页面中嵌入JavaScript代码，或者通过<script>标签在HTML文件中引入JavaScript文件。由于.js文件是纯文本文件，因此可以直接编辑和阅读。

.mjs：ES Modules文件

.mjs是ECMAScript模块（ES Modules）的文件后缀。ES Modules是JavaScript的模块化标准，它允许开发者将代码拆分为多个独立的模块，并通过import和export语句进行模块间的交互。.mjs文件通常用于现代前端框架和库中，如React、Vue等。

使用.mjs文件时，需要在HTML文件中通过<script type="module">标签引入。此外，为了兼容老版本的浏览器，还需要在服务器端设置MIME类型为 application/javascript。

当你在Node.js环境中使用.mjs文件时，需要在package.json文件中显式地指定"type": "module"，以告诉Node.js解析器该项目使用的是ES模块。

.cjs：CommonJS模块

.cjs是CommonJS模块的文件后缀。CommonJS是Node.js环境中使用的模块化标准，它允许开发者将代码拆分为多个独立的模块，并通过require和module.exports语句进行模块间的交互。

使用.cjs文件时，需要在Node.js环境中运行，或者在HTML文件中通过<script type="text/javascript">标签引入。需要注意的是，由于CommonJS模块不支持浏览器环境，因此在使用时需要确保运行环境为Node.js或兼容Node.js的环境。

在Node.js项目中，默认情况下，如果没有显式地指定使用ES模块（通过"type": "module"），那么Node.js会将所有的.js文件都视为CommonJS模块。

通常情况下，Node.js 默认使用 CommonJS 模块系统，因此.js 和.cjs 文件可以直接在 Node.js 中使用。而 ES Modules 需要在 Node.js 中启用 --experimental-modules 标志才能使用，或者将文件扩展名设置为.mjs。

HTMLScriptElement：supports（）static方法- Web API| MDN --- HTMLScriptElement: supports() static method - Web APIs | MDN

globalThis - JavaScript| MDN --- globalThis - JavaScript | MDN

ES6深度：模块- Mozilla Hacks -Web开发者博客 --- ES6 In Depth: Modules - Mozilla Hacks - the Web developer blog