CommonJS与ESM

CommonJS的产生

CommonJS 由 Mozilla 工程师 Kevin Dangoor 于 2009 年 1 月创立,最初命名为ServerJS。2009 年 8 月,该项目更名为CommonJS。旨在解决 Javascript 中缺少模块化标准的问题。

Node.js 后来也采用了 CommonJS 的模块规范。

module与require

在CommonJS中,module与require并非js关键字,而是一个对象与函数,这可以去打印看看

js 复制代码
console.log(module)

{
  id: '.',
  path: '/Users/xx/code/test-code',
  exports: {},
  filename: '/Users/xx/code/test-code/s.cjs',
  loaded: false,
  children: [],
  paths: [
    '/Users/xx/code/test-code/node_modules',
    '/Users/xx/code/node_modules',
    '/Users/xx/node_modules',
    '/Users/node_modules',
    '/node_modules'
  ]
}

console.log(require)
[Function: require] {
  resolve: [Function: resolve] { paths: [Function: paths] },
  main: {
    id: '.',
    path: '/Users/xx/code/test-code',
    exports: {},
    filename: '/Users/xx/code/test-code/s.cjs',
    loaded: false,
    children: [],
    paths: [
      '/Users/zhutao/code/test-code/node_modules',
      '/Users/zhutao/code/node_modules',
      '/Users/zhutao/node_modules',
      '/Users/node_modules',
      '/node_modules'
    ]
  },
  extensions: [Object: null prototype] {
    '.js': [Function (anonymous)],
    '.json': [Function (anonymous)],
    '.node': [Function (anonymous)]
  },
  cache: [Object: null prototype] {
    '/Users/xx/code/test-code/s.cjs': {
      id: '.',
      path: '/Users/xx/code/test-code',
      exports: {},
      filename: '/Users/xx/code/test-code/s.cjs',
      loaded: false,
      children: [],
      paths: [Array]
    }
  }
}

我们可以看到两个对象,其中的module.exports是module下面的一个对象 exports只是module.exports下面的引用

所以当module.exports与exports同时存在时,只会导出module.exports

js 复制代码
//s.cjs
module.exports = {
  name: 1,
};
exports = {
  age: 1,
};
//或者
exports = {
  age: 1,
};

module.exports = {
  name: 1,
};

//a.cjs
const modu = require("./s.cjs");
console.log(modu); //{ name: 1 }

同样,exports改变指针指向也会导致导出失效,

所以exports只能以exports.xx = xx;的方式导出

js 复制代码
// s.cjs
exports = {
  age: 1,
};
//a.cjs
const modu = require("./s.cjs");
console.log(modu); //{}



// s.cjs
exports.name = {
  age: 1,
};
//a.cjs
const modu = require("./s.cjs");
console.log(modu); //{ name: { age: 1 } }

但使用exports.xx =xx;后上下文都有module.exports = {} 讲改变指针指向,原本的exports将失去导出效果

language 复制代码
//只有module.exports生效 既然导出对象只有name没有age
module.exports = {
  name: 1,
};
exports.age = 12;

ESM

在ESM中import与export 与export default 是一对关键字

并且ESM模块解析是发生在编译阶段,而CommonJS是发生在运行阶段,这个很好理解,CommonJS本身就是函数,既然是函数就要运行时进行解析。

区别

  1. 二者最外层this指向不一样,Common.js指向exports ESM指向undefined。

最外层this也能导出,但遇到使用module.exports改变指向时会失去效果 2. ESM没有__dirname与__filename

相关推荐
慧一居士3 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead5 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js