17370845950

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模块。

• 想在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，无需手动配加载器