javascript模块加载器是什么_如何使用require和import？

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

标签： vue react javascript java js 前端 node.js json node vite 浏览器 a