模块化：ESModule、CommonJS

最新推荐文章于 2025-08-10 19:50:19 发布

米儿web

最新推荐文章于 2025-08-10 19:50:19 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_24767091/article/details/121618089

JS 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了JavaScript的模块系统，包括CommonJS和ESModule的导出与导入方式。CommonJS使用`module.exports`和`exports`进行导出，而ESModule则提供了多种导出和导入语法，如默认导出、命名导出等。在webpack环境中，两者可以相互转换，但在浏览器和Node.js的不同版本中支持情况各异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

require细节

一、CommonJS

导出

const name = "why"
const age = 18

function sum(num1, num2) {
  return num1 + num2
}

// 1.导出方案 module.exports
module.exports = {
  // aaa: "hahahahaah",
  // bbb: "bbb"
  name,
  age,
  sum
}
// 第二种导出方式
exports.name = name
exports.age = age
exports.sum = sum

// 这种代码不会进行导出
exports = {
  name,
  age,
  sum
}

module.exports = {

}

// 最终能导出的一定是module.exports

导入

// 使用另外一个模块导出的对象, 那么就要进行导入 require
// const { aaa, bbb } = require("./why.js")
const { name, age, sum } = require("./why.js")

二、ESModule

1.导出导入方式

导出：常用的是第1 2种

// 1.第一种方式: export 声明语句
export const name = "why"
export const age = 18

export function foo() {
  console.log("foo function")
}

export class Person {

}

// 2.第二种方式: export 导出 和 声明分开
const name = "why"
const age = 18
function foo() {
  console.log("foo function")
}

export {
  name,
  age,
  foo
}

// 3.第三种方式: 第二种导出时起别名
// export {
//   name as fName,
//   age as fAge,
//   foo as fFoo
// }

导入

// 1.导入方式一: 普通的导入
import { name, age, foo } from "./foo.js"
import { fName, fAge, fFoo } from './foo.js'

// 2.导入方式二: 起别名
import { name as fName, age as fAge, foo as fFoo } from './foo.js'

// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'

console.log(foo.name)

2.默认导出导入

导出

const name = "why"
const age = 18

const foo = "foo value"

// 1.默认导出的方式一:
export {
  // named export
  name,
  age as default,
  // foo as default
}

// 2.默认导出的方式二: 常见
export default foo

// 注意: 默认导出只能有一个

导入

// 导入语句: 导入的默认的导出
import why from './foo.js'

console.log(why)

3.import函数

导出

const name = "why"
const age = 18

const foo = "foo value"

export {
  name,
  age,
  foo
}

导入，import函数返回的结果是一个Promise，可以异步获取导出值，避免阻塞线程

// import函数返回的结果是一个Promise
import("./foo.js").then(res => {
  console.log("res:", res.name)
})

console.log("后续的代码都是不会运行的~")

// ES11新增的特性
// meta属性本身也是一个对象: { url: "当前模块所在的路径" }
console.log(import.meta)

在webpack环境下，ESModule、CommonJS可以互相使用，在浏览器环境下不支持CommonJS，node环境下不同版本对ESModule支持不同，所以不能互相使用