webpack 之(6) commonJS和 ES6 Module区别 (未完成)

模块定义和使用

在commonjs中,一个文件就是一个模块.定义一个模块导出通过exports 或者 module.exports挂载即可

exports.count = 1;

导入一个模块

const {resolve} = require('path')

CommonJS的模块主要由原生module来实现,这个类上的属性对我们理解模块机制很重要

Module {
  id: '.', // 如果是 mainModule id 固定为 '.'，如果不是则为模块绝对路径
  exports: {}, // 模块最终 exports
  filename: '/absolute/path/to/entry.js', // 当前模块的绝对路径
  loaded: false, // 模块是否已加载完毕
  children: [], // 被该模块引用的模块
  parent: '', // 第一个引用该模块的模块
  paths: [ // 模块的搜索路径
   '/absolute/path/to/node_modules',
   '/absolute/path/node_modules',
   '/absolute/node_modules',
   '/node_modules'
  ]

 

小结:

CommonJS 模块加载过程是同步阻塞性地加载，在模块代码被运行前就已经写入了 cache，同一个模块被多次 require 时只会执行一次，重复的 require 得到的是相同的 exports 引用。

值得留意：cache key 使用的是模块在系统中的绝对位置，由于模块调用位置的不同，相同的 require('foo')代码并不能保证返回的是统一个对象引用。我之前恰巧就遇到过，两次 require('egg-core')但是他们并不相等。