JavaScript模块化是将代码拆分为独立可复用单元，解决全局污染、命名冲突与依赖混乱问题；CommonJS用require/module.exports实现运行时加载与值拷贝，ES6模块用import/export实现编译时静态分析与活绑定。

JavaScript模块化是把代码按功能拆成独立、可复用的单元，每个单元有自己作用域，不污染全局，还能明确声明“我提供什么”和“我需要什么”。它解决的是早期 JS 全局变量乱飞、命名冲突、依赖不清、难维护的问题。

语法写法不同

CommonJS 用 require() 和 module.exports（或 exports）：
– 导出可以是对象、函数、值，比如 module.exports = { add, name } 或 exports.add = add
– 导入写成 const math = require('./math')，解构是运行时行为，不是语法层面支持

ES6 模块用 import 和 export：
– 支持命名导出（export const a = 1）、默认导出（export default function()）、重命名导出等
– 导入必须在顶层，不能放在 if 或函数里；支持静态解构，如 import { add } from './math.js'

加载时机与依赖分析方式不同

CommonJS 是运行时加载：
– require() 执行时才去读文件、执行模块代码、返回 module.exports
– 路径可以是表达式，支持动态加载：require('./' + env + '.js')
– 工具无法在编译阶段知道完整依赖树，难以做深度优化

ES6 模块是编译时静态分析：
– import 语句在代码解析阶段就被提取，依赖关系一目了然
– 因此支持 Tree Shaking（自动剔除未使用的导出）、类型推断、打包优化
– 不允许动态路径：if () { import('./a.js') } ❌ 必须用 import('./a.js')（返回 Promise）

导出值的行为本质不同

CommonJS 导出的是值的拷贝：
– 比如模块内 let count = 0; module.exports = { count }，外部拿到的是当时 count 的快照
– 后续模块内部改 count，外部 require 返回的对象里的 count 不会变

ES6 模块导出的是活的绑定（只读引用）：
– 导出 export let count = 0，所有导入该 count 的地方看到的是同一个响应式绑定
– 模块内部执行 count++，所有 import 它的地方都能立刻读到新值（但不能给这个绑定重新赋值）

环境与兼容性差异

CommonJS 原生只跑在 Node.js（后缀通常为 .cjs 或 "type": "commonjs"），浏览器需靠 Webpack 等打包工具转译才能用。

ES6 模块是语言标准：
– 浏览器原生支持（）
– Node.js 也原生支持（需 .mjs 后缀或 "type": "module"）
– 两者不互通：不能在同一个文件里混用 import 和 require（Node.js 严格模式下会报错）

# javascript  # es6  # java  # js  # node.js  # node  # 浏览器  # 工具  # 作用域 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何用搬瓦工VPS快速搭建个人网站？  如何快速查询网址的建站时间与历史轨迹？  如何在阿里云通过域名搭建网站？  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何快速搭建高效WAP手机网站？  Swift中switch语句区间和元组模式匹配  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  iOS验证手机号的正则表达式  详解阿里云nginx服务器多站点的配置  如何在景安云服务器上绑定域名并配置虚拟主机？  如何选择PHP开源工具快速搭建网站？  JavaScript如何实现错误处理_try...catch如何捕获异常？  微信小程序 配置文件详细介绍  Laravel如何使用Gate和Policy进行授权？（权限控制）  linux写shell需要注意的问题(必看)  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  Python文本处理实践_日志清洗解析【指导】  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  如何在自有机房高效搭建专业网站？  深入理解Android中的xmlns:tools属性  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何配置Horizon来管理队列？（安装和使用）  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  如何续费美橙建站之星域名及服务？  Linux系统命令中tree命令详解  在centOS 7安装mysql 5.7的详细教程  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  创业网站制作流程,创业网站可靠吗？  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  如何在阿里云香港服务器快速搭建网站？  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  想要更高端的建设网站，这些原则一定要坚持！  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  零基础网站服务器架设实战：轻量应用与域名解析配置指南  浅谈javascript alert和confirm的美化  Laravel如何使用Eloquent进行子查询  利用python获取某年中每个月的第一天和最后一天  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  怎么用AI帮你设计一套个性化的手机App图标？  如何在万网自助建站平台快速创建网站？  Linux系统命令中screen命令详解  如何在服务器上配置二级域名建站？  网页设计与网站制作内容,怎样注册网站？