美文网首页
ES6模块与CommonJS模块的差异

ES6模块与CommonJS模块的差异

作者: 勤奋的大鱼 | 来源:发表于2020-11-11 16:00 被阅读0次
  1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。(这里指的是基础数据类型,如果是引用类型还是引用)
  2. CommonJS 模块是运行时加载,ES6 模块是编译时加载(静态加载)。
    两者的区别其实可以看webpack的实现,具体解析写在代码注释里面(这里参考的是webpack5的实现)
function __webpack_require__(moduleId) {
  // 缓存模块,确保模块函数只执行一次
  if(__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  // Execute the module function
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  return module.exports;
}
// webpack_require方法一致,主要的区别在于cmd 和 esm模块的写法
let webpack_modules = {
   'cmd-mod': (module, _,  __webpack_require__) => {
      let a = 1
      module.exports = a
    },
   // 这里的__webpack_exports__就是传入的module.exports
   'es-mod': (_, __webpack_exports__, __webpack_require__) => {
     __webpack_require__.r(__webpack_exports__)
     //__ webpack_required__.d 做的事情就是通过defineProperty劫持get,返回第二个参数的内容,因此不管在哪里去引用这个模块,返回的都是这个闭包中a,因此是值的引用
     __webpack_require__.d(__webpack_exports__, {
      'default': __WEBPACK_DEFAULT_EXPORT__ 
    })
    let a = 1
    __WEBPACK_DEFAULT_EXPORT__ = a
   }
}

相关文章

  • ES6 模块与 CommonJS 模块的差异

    讨论 Node.js 加载 ES6 模块之前,必须了解 ES6 模块与 CommonJS 模块完全不同。impor...

  • ES6模块与CommonJS模块的差异

    CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。(这里指的是基础数据类型,如果是引用类型...

  • ES6 模块与 CommonJS 模块的差异

    CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。 commonjs模块加载后原始类型的值...

  • 模块

    记录下 commonjs模块和es6模块的使用方法 commonjs模块 Node内部提供一个Module构建函数...

  • AMD、CMD、CommonJs、ES6的对比

    一、CommonJS 和 ES6 区别: 1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。...

  • 2019-08-12

    import函数 CommonJS模块和ES6模块的区别 exports与module.exports的区别 mo...

  • Node

    Nodejs模块 常见模块 ES6规范 CommonJS规范 共同点:每一个文件都是一个模块 CommonJS规范...

  • ES6模块化

    模块化技术有哪些:- CommonJS(nodejs)、ES6模块化、AMD、CMD等 CommonJS:Comm...

  • ES6模块的循环加载

    ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用,如果使用import从一个模块...

  • 浏览器内核

    一、区别: 1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。 2.CommonJS 模块的r...

网友评论

      本文标题:ES6模块与CommonJS模块的差异

      本文链接:https://www.haomeiwen.com/subject/oqniuqtx.html