0

0

JavaScript模块化有哪些规范_CommonJS和ES6有何区别?

夢幻星辰

夢幻星辰

发布时间:2025-12-21 11:30:08

|

202人浏览过

|

来源于php中文网

原创

javascript模块化主流规范有commonjs和es6 module两种广泛落地,前者用于node.js默认环境,后者获现代浏览器及新版node原生支持;amd/cmd已基本淘汰。

javascript模块化有哪些规范_commonjs和es6有何区别?

JavaScript模块化主要有四种主流规范:CommonJS、AMD、CMD 和 ES6 Module(ESM)。目前实际项目中真正广泛落地的是 CommonJS(Node.js 默认)和 ES6 Module(现代浏览器与新版 Node.js 原生支持),AMD/CMD 已基本被历史淘汰,仅在极老项目中可见。

语法写法不同

这是最直观的区别:

  • CommonJS 用 module.exportsexports.xxx 导出,用 require('./x') 导入
  • ES6 Module 用 export(命名导出)、export default(默认导出),用 import 导入,且必须写明扩展名(如 .js)或使用完整路径
  • CommonJS 的 require 是函数调用,可写在任意位置;ES6 的 import 是声明语句,只能出现在顶层,不能放在 if 或 try 里

加载时机与执行逻辑不同

本质差异在于“动态”还是“静态”:

  • CommonJS 是运行时同步加载:代码执行到 require 才去读文件、执行模块、返回结果;支持条件加载、循环 require
  • ES6 Module 是编译时静态加载:所有 import 在代码解析阶段就被分析确定,依赖关系固定;不支持运行时条件导入(除非用 import() 动态导入函数)
  • 这种静态性让打包工具(如 Webpack、Vite)能做 tree-shaking——自动剔除未使用的导出代码

值传递方式不同

影响变量更新是否同步:

TicNote
TicNote

出门问问推出的Agent AI智能硬件

下载

立即学习Java免费学习笔记(深入)”;

  • CommonJS 导出的是值的拷贝:比如导出一个数字或字符串,后续模块内修改它,不会反映到已导入的地方
  • ES6 Module 导出的是值的动态只读引用:导出一个对象或函数,其内部属性变化会同步体现;但不能重新赋值整个导出绑定(如 export let a = 1; a = 2 允许,但 a = {} 不行)
  • 典型例子:一个计数器模块,ES6 中多个地方 import 同一个 let count = 0,都能看到彼此的 count++ 变化;CommonJS 则各自拿到初始值的副本

环境与配置要求不同

实际使用需注意兼容性细节:

  • Node.js 中,默认是 CommonJS;启用 ESM 需满足三者之一:.mjs 后缀、package.json 中设 "type": "module"、或命令行加 --experimental-modules(旧版)
  • 浏览器原生支持 <script type="module"></script>,但不支持 bare import(如 import {foo} from 'lodash'),必须用相对/绝对 URL
  • 两者不能混用:不能在 .cjs 文件里写 import,也不能在 .mjs 里用 require(除非通过 createRequire 曲线救国)

基本上就这些。选型上,新项目优先用 ES6 Module;纯 Node.js 后端脚本仍常见 CommonJS;跨环境(如同时跑在前端和 Node)建议统一用 ESM 并配好构建工具。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

452

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

330

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

81

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

231

2025.12.24

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

839

2023.08.22

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

32

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号