「万字进阶」深入浅出 Commonjs 和 Es Module - 腾讯云开发者社区-腾讯云

一 前言

• 1 Commonjs 和 Es Module 有什么区别 ？

• 2 Commonjs 如何解决的循环引用问题 ？

• 3 既然有了 exports，为何又出了 module.exports? 既生瑜，何生亮 ？

• 4 require 模块查找机制 ？

• 5 Es Module 如何解决循环引用问题 ？

• 6 exports = {} 这种写法为何无效 ？

• 7 关于 import() 的动态引入 ？

• 8 Es Module 如何改变模块下的私有变量 ？

• 9 ...

ps:由于作者前一段时间在写《React进阶实践指南》小册，没有时间持续输出高质量文章，接下来我会回归创作高质量技术文章，送人玫瑰，手有余香，希望阅读的朋友能给作者点个赞👍，鼓励我持续创作。

二 模块化

• 全局污染

• 依赖管理

• 下层 js 能调用上层 js 的方法，但是上层 js 无法调用下层 js 的方法。

三 Commonjs

• Browserify 是 CommonJS 在浏览器中的一种实现；

• webpack 打包工具对 CommonJS 的支持和转换；也就是前端应用也可以在编译之前，尽情使用 CommonJS 进行开发。

1 commonjs 使用与原理

• 在 commonjs 中每一个 js 文件都是一个单独的模块，我们可以称之为 module；

• 该模块中，包含 CommonJS 规范的核心变量: exports、module.exports、require；

• exports 和 module.exports 可以负责对模块中的内容进行导出；

• require 函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

commonjs 使用初体验

const sayName = require('./hello.js')
module.exports = function say(){
    return {
        name:sayName(),
        author:'我不是外星人'
    }
}

• 如何解决变量污染的问题。

• module.exports，exports，require 三者是如何工作的？又有什么关系？

commonjs 实现原理

• module 记录当前模块信息。

• require 引入模块的方法。

• exports 当前模块导出的属性

(function(exports,require,module,__filename,__dirname){
   const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'我不是外星人'
        }
    }
})

• 在 Commonjs 规范下模块中，会形成一个包装函数，我们写的代码将作为包装函数的执行上下文，使用的 require ，exports ，module 本质上是通过形参的方式传递到包装函数中的。

const modulefunction = wrapper(`
  const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'我不是外星人'
        }
    }
`)

• 如上模拟了一个包装函数功能， script 为我们在 js 模块中写的内容，最后返回的就是如上包装之后的函数。当然这个函数暂且是一个字符串。

• 在模块加载的时候，会通过 runInThisContext (可以理解成 eval ) 执行 modulefunction ，传入require ，exports ，module 等参数。最终我们写的 nodejs 文件就这么执行了。

2 require 文件加载流程

• ① 为 nodejs 底层的核心模块。

• ② 为我们编写的文件模块，比如上述 sayName

• ③ 为我们通过 npm 下载的第三方自定义模块，比如 crypto-js。

require 加载标识符原则

• 首先像 fs ，http ，path 等标识符，会被作为 nodejs 的核心模块。

• ./ 和 ../ 作为相对路径的文件模块， / 作为绝对路径的文件模块。

• 非路径形式也非核心模块的模块，将作为自定义模块。

• 在当前目录下的 node_modules 目录查找。

• 如果没有，在父级目录的 node_modules 查找，如果没有在父级目录的父级目录的 node_modules 中查找。

• 沿着路径向上递归，直到根目录下的 node_modules 目录。

• 在查找过程中，会找 package.json 下 main 属性指向的文件，如果没有 package.json ，在 node 环境下会以此查找 index.js ，index.json ，index.node。

3 require 模块引入与处理

• a.js文件

const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}

• b.js文件

const say = require('./a')
const  object = {
   name:'《React进阶实践指南》',
   author:'我不是外星人'
}
console.log('我是 b 文件')
module.exports = function(){
    return object
}

• 主文件main.js

• main.js 和 a.js 模块都引用了 b.js 模块，但是 b.js 模块只执行了一次。

• a.js 模块 和 b.js 模块互相引用，但是没有造成循环引用的情况。

• 执行顺序是父 -> 子 -> 父；

require 加载原理

• 为 false 表示还没有加载；

• 为 true 表示已经加载

 // id 为路径标识符
function require(id) {
   /* 查找  Module 上有没有已经加载的 js  对象*/
   const  cachedModule = Module._cache[id]

   /* 如果已经加载了那么直接取走缓存的 exports 对象  */
  if(cachedModule){
    return cachedModule.exports
  }

  /* 创建当前模块的 module  */
  const module = { exports: {} ,loaded: false , ...}

  /* 将 module 缓存到  Module 的缓存属性中，路径标识符作为 id */
  Module._cache[id] = module
  /* 加载文件 */
  runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)
  /* 加载完成 *//
  module.loaded = true
  /* 返回值 */
  return module.exports
}

• require 会接收一个参数——文件标识符，然后分析定位文件，分析过程我们上述已经讲到了，加下来会从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容。

• 如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件，将 loaded 属性设置为 true ，然后返回 module.exports 对象。借此完成模块加载流程。

• 模块导出就是 return 这个变量的其实跟 a = b 赋值一样， 基本类型导出的是值， 引用类型导出的是引用地址。

• exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports， 所以对 exports 进行赋值会导致 exports 操作的不再是 module.exports 的引用。

require 避免重复加载

require 避免循环引用

• ① 首先执行 node main.js ，那么开始执行第一行 require(a.js)；

• ② 那么首先判断 a.js 有没有缓存，因为没有缓存，先加入缓存，然后执行文件 a.js （需要注意 是先加入缓存， 后执行模块内容）;

• ③ a.js 中执行第一行，引用 b.js。

• ④ 那么判断 b.js 有没有缓存，因为没有缓存，所以加入缓存，然后执行 b.js 文件。

• ⑤ b.js 执行第一行，再一次循环引用 require(a.js) 此时的 a.js 已经加入缓存，直接读取值。接下来打印 console.log('我是 b 文件')，导出方法。

• ⑥ b.js 执行完毕，回到 a.js 文件，打印 console.log('我是 a 文件')，导出方法。

• ⑦ 最后回到 main.js，打印 console.log('node 入口文件') 完成这个流程。

• 如上第 ⑤ 的时候，当执行 b.js 模块的时候，因为 a.js 还没有导出 say 方法，所以 b.js 同步上下文中，获取不到 say。

const say = require('./a')
const  object = {
   name:'《React进阶实践指南》',
   author:'我不是外星人'
}
console.log('我是 b 文件')
console.log('打印 a 模块' , say)

setTimeout(()=>{
    console.log('异步打印 a 模块' , say)
},0)

module.exports = function(){
    return object
}

• 第一次打印 say 为空对象。

• 第二次打印 say 才看到 b.js 导出的方法。

• 一是用动态加载 a.js 的方法，马上就会讲到。

• 二个就是如上放在异步中加载。

4 require 动态加载

console.log('我是 a 文件')
exports.say = function(){
    const getMes = require('./b')
    const message = getMes()
    console.log(message)
}

• 如上在 a.js 模块的 say 函数中，用 require 动态加载 b.js 模块。然后执行在 main.js 中执行 a.js 模块的 say 方法。

5 exports 和 module.exports

exports 使用

• exports 就是传入到当前模块内的一个对象，本质上就是 module.exports。

exports={
    name:'《React进阶实践指南》',
    author:'我不是外星人',
    say(){
        console.log(666)
    }
}

function wrap (myExports){
    myExports={
       name:'我不是外星人'
   }
}

let myExports = {
    name:'alien'
}
wrap(myExports)
console.log(myExports)

module.exports 使用

module.exports ={
    name:'《React进阶实践指南》',
    author:'我不是外星人',
    say(){
        console.log(666)
    }
}

• 上述情况下 exports.name 无效，会被 module.exports 覆盖。

Q & A

四 Es Module

• 借助 Es Module 的静态导入导出的优势，实现了 tree shaking。

• Es Module 还可以 import() 懒加载方式实现代码分割。

导出 export 和导入 import

const name = '《React进阶实践指南》'
const author = '我不是外星人'
export { name, author }
export const say = function (){
    console.log('hello , world')
}

• export { }， 与变量名绑定，命名导出。

• import { } from 'module'， 导入 module 的命名导出 ，module 为如上的 ./a.js

• 这种情况下 import { } 内部的变量名称，要与 export { } 完全匹配。

const name = '《React进阶实践指南》'
const author = '我不是外星人'
const say = function (){
    console.log('hello , world')
}
export default {
    name,
    author,
    say
}

• export default anything 导入 module 的默认导出。anything 可以是函数，属性方法，或者对象。

• 对于引入默认导出的模块，import anyName from 'module'， anyName 可以是自定义名称。

export const name = '《React进阶实践指南》'
export const author = '我不是外星人'

export default  function say (){
    console.log('hello , world')
}

import theSay , { name, author as  bookAuthor } from './a.js'
console.log(
    theSay,     // ƒ say() {console.log('hello , world') }
    name,       // "《React进阶实践指南》"
    bookAuthor  // "我不是外星人"
)

import theSay, * as mes from './a'
console.log(
    theSay, // ƒ say() { console.log('hello , world') }
    mes // { name:'《React进阶实践指南》' , author: "我不是外星人" ，default:  ƒ say() { console.log('hello , world') } }
)

• 导出的属性被合并到 mes 属性上， export 被导入到对应的属性上，export default 导出内容被绑定到 default 属性上。theSay 也可以作为被 export default 导出属性。

• 从 module 模块中引入 name ，并重命名为 bookName ，从 module 模块中引入 author ，并重命名为 bookAuthor。然后在当前模块下，使用被重命名的名字。

export * from 'module' // 第一种方式
export { name, author, ..., say } from 'module' // 第二种方式
export { bookName as name, bookAuthor as author, ..., say } from 'module' //第三种方式

• 第一种方式：重定向导出 module 中的所有导出属性， 但是不包括 module 内的 default 属性。

• 第二种方式：从 module 中导入 name ，author ，say 再以相同的属性名，导出。

• 第三种方式：从 module 中导入 name ，重属名为 bookName 导出，从 module 中导入 author ，重属名为 bookAuthor 导出，正常导出 say 。

• 执行 module 不导出值 多次调用 module 只运行一次。

• import('module')，动态导入返回一个 Promise。为了支持这种方式，需要在 webpack 中做相应的配置处理。

ES6 module 特性

1 静态语法

2 执行特性

import b from './b'
console.log('a模块加载')
export default  function say (){
    console.log('hello , world')
}

• main.js 和 a.js 都引用了 b.js 模块，但是 b 模块也只加载了一次。

• 执行顺序是子 -> 父

3 导出绑定

• 如上属性 num 的导入是绑定的。

• 使用 import 被导入的模块运行在严格模式下。

• 使用 import 被导入的变量是只读的，可以理解默认为 const 装饰，无法被赋值

• 使用 import 被导入的变量是与原变量绑定/引用的，可以理解为 import 导入的变量无论是否为基本类型都是引用传递。

import() 动态引入

setTimeout(() => {
    const result  = import('./b')
    result.then(res=>{
        console.log(res)
    })
}, 0);

• import() 可以动态使用，加载模块。

• import() 返回一个 Promise ，成功回调 then 中可以获取模块对应的信息。name 对应 name 属性， default 代表 export default 。__esModule 为 es module 的标识。

import() 可以做一些什么

• 首先 import() 动态加载一些内容，可以放在条件语句或者函数执行上下文中。

• import() 可以实现懒加载，举个例子 vue 中的路由懒加载；

[
   {
        path: 'home',
        name: '首页',
        component: ()=> import('./home') ,
   },
]

const LazyComponent =  React.lazy(()=>import('./text'))
class index extends React.Component{
    render(){
        return <React.Suspense fallback={ <div className="icon"><SyncOutlinespin/></div> } >
               <LazyComponent />
           </React.Suspense>
    }

tree shaking 实现

export let num = 1
export const addNumber = ()=>{
    num++
}
export const delNumber = ()=>{
    num--
}

• 如上 a.js 中暴露两个方法，addNumber和 delNumber，但是整个应用中，只用到了 addNumber，那么构建打包的时候，delNumber将作为没有引用的方法，不被打包进来。

五 Commonjs 和 Es Module 总结

Commonjs 总结

• CommonJS 模块由 JS 运行时实现。

• CommonJs 是单个值导出，本质上导出的就是 exports 属性。

• CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。

• CommonJS 模块同步加载并执行模块文件。

es module 总结

• ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。

• ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。

• ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。

• ES6 模块提前加载并执行模块文件，

• ES6 Module 导入模块在严格模式下。

• ES6 Module 的特性可以很容易实现 Tree Shaking 和 Code Splitting。

六 总结