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')但是他们并不相等。