JavaScript：require 和 import

require 和 import 是 JavaScript 中用于模块导入的不同语法，它们遵循不同的模块规范

require()

起源：

require() 出现在 CommonJS 规范中，这是 Node.js 环境最早采用的模块化方案，也适用于其他遵循 CommonJS 的环境。

语法：

同步加载模块，通常与 module.exports 或 exports 一起使用。

使用场景：

Node.js 中，通过 require(moduleName) 来加载模块，返回模块导出的对象或值。

加载时机：

运行时加载，即在执行到 require 语句时才加载模块并执行模块代码。

示例

const myModule = require('./myModule.js');

---

import

起源

import 关键字来源于 ECMAScript 6（ES6/ES2015）的模块规范，是现代浏览器和越来越多的JavaScript环境（包括Node.js v14及以上版本开启实验性支持，v16及以上版本稳定支持）原生支持的模块导入方式。

语法

静态加载模块，可以导入特定的命名导出，也可以导入默认导出。

使用场景

在支持ES6模块的环境中，
通过 import { member } from ‘modulePath’ 或 import defaultExport from ‘modulePath’ 导入模块。

加载时机

编译时加载，即在编译阶段就能识别模块间的依赖关系，有利于静态分析和优化。

异步加载

import() 表达式可以用于动态导入，返回一个 Promise，用于异步加载模块。

示例

// 导入默认导出
import myModule from './myModule.js';

// 导入命名导出
import { myFunction, myVariable } from './myModule.js';

// 动态导入
import('./myModule.js').then((myModule) => {
  // 使用myModule
});

注意：
在JavaScript的ES6模块导入语句中，两种写法：

//省略扩展名
import server from "../utils/server";
//包含扩展名
import server from "../utils/server.js";

上面两种写法，在大多数情况下，效果是相同的，因为现代打包工具（如Webpack、Rollup、Parcel等）会解析路径并查找对应的模块文件。默认情况下，它们会假设 .js、.mjs 或 .jsx 扩展名。

然而，如果你的项目配置或所使用的构建工具启用了模块解析的某些特定模式（比如Node.js的ESM模块导入默认会查找.js扩展名），那么省略扩展名也是可行的。在某些框架或环境中，还可以导入其他类型的模块，如.ts（TypeScript）、.vue（Vue单文件组件）等，这时就需要指定扩展名以正确解析模块。

总的来说，在现代前端开发环境中，通常推荐省略.js扩展名以简化代码，但在某些情况下，尤其是需要导入非默认扩展名的模块时，必须显式写出扩展名。