JavaScript中如何实现模块化_CommonJS和ES6区别

JavaScript模块化主要有CommonJS和ES6两种方式：前者用require/module.exports，运行时同步加载，Node原生支持；后者用import/export，编译时静态分析，浏览器和新Node版本原生支持；二者长期共存、各司其职。

JavaScript模块化主要靠 CommonJS 和 ES6（ECMAScript 2015）模块系统 两种方式，它们在语法、加载机制、运行时行为和适用环境上差异明显。选错方案容易导致报错或打包异常，尤其在Node.js和浏览器混合开发中。

语法写法不同

CommonJS 使用 require() 和 module.exports（或 exports），是动态、可写多次的赋值式导出：

• 导出：module.exports = { foo: 1 }; 或 exports.bar = () => {}
• 导入：const utils = require('./utils');（路径必须带 ./ 或 ../）

ES6 模块使用 import / export，是静态声明、编译期确定的语法：

• 导出：export const a = 1;、export default function() {}
• 导入：import { a } from './utils.js';（注意：浏览器中路径必须含扩展名或以 .js 结尾）

加载时机与执行顺序不同

CommonJS 是运行时同步加载，require() 执行时才读取并执行模块文件，支持条件加载（如 if (x) require('./a')）。

立即学习“Java免费学习笔记（深入）”；

ES6 模块是编译时静态分析，所有 import 必须在顶层，不能放在 if 或函数内；且 import 语句会被提升到模块顶部，但实际绑定在模块执行阶段完成（即“实时绑定”——导出值变了，导入处也会跟着变）。

默认导出与命名导出处理不同

CommonJS 只有一个导出对象（module.exports），所谓“默认导出”只是把整个对象赋给它，没有语法级区分：

标签： 模块化 javascript es6 java js 前端 node.js json node vite typescr