commonjs和esmodule

commonjs的模块导出和引用写法:

lib.js 导出一个模块

javascript 复制代码
let a = 1
let b = 2
function aPlus1() {
  return a++
}
module.exports = {
  a,b,aPlus1
}

index.js引用一个模块

javascript 复制代码
const {a,b,aPlus1} = require('./lib.js')
console.log('hh:',a)

esmodule的模块导出和引用方法:

lib.mjs

javascript 复制代码
export let a = 1
export let b = 2

index.mjs

javascript 复制代码
import {a,b} from './lib.mjs'

console.log(a)
console.log(b)

总结

commonjs使用require关键字来导入模块,使用module.exports来导出模块。

esmodule使用import {a} from './lib.mjs'来导入模块,使用export来导出模块。

存在的区别:

  • 模块加载和执行的时间点不同。CommonJS的模块在运行时加载和执行,而ES Module的模块在编译时就已经加载和执行。
  • 模块导出和导入的方式不同。CommonJS使用module.exports导出模块的输出,使用require导入其他模块。导出时,通常是创建一个值的副本,导入时,这个副本被修改不会影响导出的值。而ES Module使用export导出模块的输出,使用import导入其他模块。导出时,创建的是值的引用,因此对导出值的任何修改都会反映在导入模块中。
  • 模块作用域不同。在CommonJS中,模块内的代码运行在顶层作用域中,可能会污染全局作用域。而ES Module则为每个模块创建一个独立的作用域,避免全局作用域的污染。
相关推荐
渣哥3 分钟前
用错注入方式?你的代码可能早就埋下隐患
javascript·后端·面试
尘世中一位迷途小书童4 分钟前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手5 分钟前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎7 分钟前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
csbysj20209 分钟前
PHP 类型比较
开发语言
尘世中一位迷途小书童9 分钟前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构
fruge12 分钟前
前端性能优化实践指南:从理论到落地
前端·性能优化
快起来别睡了16 分钟前
用这 9 个 API,我把页面性能干到了 90+
前端
白熊18825 分钟前
【图像大模型】ms-swift 深度解析:一站式多模态大模型微调与部署框架的全流程使用指南
开发语言·ios·swift
芒果茶叶28 分钟前
深入浅出requestAnimationFrame
前端·javascript·html