JavaScript模块加载器用于管理依赖和按需加载，CommonJS用同步require，ESM用静态import，二者不兼容但可通过动态import或构建工具桥接，新项目优先选ESM。
JavaScript模块加载器是管理代码依赖、按需加载和组织模块的工具或机制。它让开发者能把大程序拆成小文件，每个文件专注一个功能，再通过require或import把它们组合起来。核心区别在于：前者属于CommonJS规范（Node.js默认），后者是ES标准（现代浏览器和打包工具支持）。
CommonJS中的require怎么用
require是同步读取并执行模块文件，返回该模块的module.exports对象。它在Node.js中原生可用，前端需借助Webpack、Browserify等打包工具才能运行。
- 引入内置模块：
const fs = require('fs'); - 引入自定义模块：
const utils = require('./utils.js');（扩展名可省略） - 引入JSON文件：
const config = require('./config.json'); - 导出方式对应：
module.exports = { foo: () => {} };或exports.bar = () => {};
ES模块中的import怎么用
import是静态声明，必须写在文件顶层，不能放在条件或函数里。它支持命名导入、默认导入和混合导入，浏览器中需加type="module"属性，Node.js从12+开始支持.mjs或"type": "module"配置。
- 命名导入：
import { foo, bar } from './utils.js'; - 默认导入：
import React from 'react';（假设模块用了export default） - 整体导入：
import * as utils from './utils.js'; - 只执行不导入：
import './polyfill.js'; - 导出对应：
export function foo() {}或export default class App {}
require和import能混用吗
不能直接混用。CommonJS和ESM是两套不兼容的模块系统。Node.js虽支持两者共存，但有严格限制：一个文件只能用一种语法；import不能出现在require调用的模块里；动态import()函数可跨系统异步加载ES模块。
立即学习“Java免费学习笔记（深入）”；
- 想在CommonJS里用ES模块？用
import('./module.js')动态导入 - 想在ES模块里用CommonJS模块？Node.js允许
import pkg from 'lodash'（自动适配默认导出） - 打包工具如Webpack/Vite会自动处理互转，但源码层仍建议统一风格
实际项目中怎么选
新项目优先用import/export，它是语言标准，Tree-shaking、静态分析、IDE支持都更好。老Node.js服务或需兼容旧环境时，require依然可靠。构建工具（如Vite、Webpack）默认以ESM为输入，会把require转成等效ESM代码。
- 浏览器直接运行 → 必须用
import+ - 纯Node.js脚本（无构建）→ 可选
require或启用ESM（改后缀或加配置） - 用React/Vue框架 → 框架工具链已预设ESM，无需手动配加载器
