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，无需手动配加载器
以上就是javascript模块加载器是什么_如何使用require和import？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544180.html
微信扫一扫 
支付宝扫一扫 
