当前位置:   article > 正文

Node.js入门 03:模块化规范 CommonJS 与 ES Module_commonjs规范

commonjs规范

目的

传统的用在网页中的JavaScript代码文件与文件之中的内容都是全局相互可见的,这对于大型项目特别是多人合作的项目来说挺不好的,容易互相影响,出现各种问题。

大多数编程语言都有类库、模块等概念来处理这个问题,在Node.js中早期是使用CommonJS规范来处理这个问题。后来JavaScript的ES6标准中制定了ES module规范,所以Node.js也渐渐的开始支持ES module规范了。

这篇文章将对这两种模块化方式做个简单的使用说明。

CommonJS

基础使用

CommonJS规范模块使用上主要就三点:

  • 每个文件就是一个模块,有自己的作用域,其中的变量、函数等都是私有的,对其他文件不可见;
  • 可以使用 module.exports 导出当前模块中的变量、函数等,供其它文件使用;
  • 其它文件中使用 require() 方法引入模块;

下面是个简单的例子:

// common.js
let name = 'naisu'
module.exports.name = name // 导出name变量
module.exports.fun = function(){ // 导出函数
    console.log('233~');
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// test.js
const cm = require('./common.js') // 导入模块

console.log(cm.name) 
cm.fun()
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述
上面例子可以看到CommonJS规范模块导入导出使用都很简单。对于模块而言所有要导出的东西整体就是一个对象,挂在module.exports上;其它文件中用 require() 方法导入模块其实就是导入了模块的module.exports上的对象。
在这里插入图片描述

module 对象

CommonJS规范中每个模块内部,都有一个module对象代表当前模块,它有以下属性:

module.id 模块的识别符,通常是带有绝对路径的模块文件名;
module.filename 模块的文件名,带有绝对路径;
module.loaded 返回一个布尔值,表示模块是否已经完成加载;
module.parent 返回一个对象,表示调用该模块的模块;
module.children 返回一个数组,表示该模块要用到的其他模块;
module.exports 表示模块对外输出的值;

上面属性中最重要的就是 module.exports 了,就像前面所描述的所有要导出的东西整体就是一个对象,挂在module.exports上。

在Node.js中提供了一个 exports 变量,该变量指向 module.exports ,也就是你可以使用 exports 来代替 module.exports ,但要注意的是不能使用 exports = ... 这种方式赋值,因为 exports 的内部实现其实可以理解为 var exports = module.exports

require() 方法

CommonJS规范中 require() 方法用于导入模块,导入放入可以向前面例子中 require('./common.js') 也可以写成 require('./common') ,两者效果是一样的。

require() 导入时可以使用相对路、绝对路径,或者也可以不带路径。在不带路径的情况下,程序运行时会从Node.js安装目录、项目的node_modules文件夹、用户的node_modules文件夹、系统node_modules文件夹等依次寻找该模块。

要注意的是 require() 导入模块生成的是一份拷贝,一旦一个值导出后模块内部的变化就不会影响到这个值了:
在这里插入图片描述

使用 require() 导入模块后会缓存该模块,下次再加载该模块会直接从缓存中取出。所有缓存保存在 require.cache 中,可以使用 delete require.cache[moduleName] 方法删除缓存:
在这里插入图片描述
上面的 require.resolve() 方法用于将模块解析到绝对路径。

ES Module

在JavaScript的ES6标准中加入了模块功能,通常被成为ES Module(或ES6 Module),这和前面的CommonJS有一个非常大的不同点:CommonJS中的模块只是从代码层面来实现,本质其实是个对象,ES Module是从语言层面制定的,原生的功能在性能、调试、编译等方面都有优势。

目前Node.js(v14.17.6)中虽然已经支持ES Module,但是使用起来还不是很舒服。想要使用ES Module的话得稍作处理,主要有两种方式(二选一):

  • ES模块和使用ES模块模块的文件名后缀都改为 .mjs
  • 项目文件夹中建立 package.json 文件,设置其中type字段 { "type": "module" } ,注意使用该方式后CommonJS模块文件名后缀就得改为 .cjs 了;

ES Module使用上和CommonJS差不多:

  • 每个文件就是一个模块;
  • 使用 export 导出;
  • 使用 import 导入;

下面是个简单的例子:

// module.mjs
let name = 'naisu'
function fun() {
    console.log('fun 233~')
}
class MC {
    constructor() {
        console.log('MC 233~')
    }
}
export { name, fun, MC }

// 下面代码等同于上面
// export let name = 'naisu'
// export function fun() {
//     console.log('fun 233~')
// }
// export class MC {
//     constructor() {
//         console.log('MC 233~')
//     }
// }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
// test.mjs
import { name, fun, MC } from './module.mjs'

console.log(name)
fun()
let mc = new MC()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

ES Module中 import 可以使用 * 代表模块整体、使用 as 来重命名,所以可以有下面用法:

// module.mjs
let name = 'naisu'
function fun() {
    console.log('fun 233~')
}
export { name, fun}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// test.mjs
import * as esm from './module.mjs'
console.log(esm.name)
esm.fun()
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
模块在输出的时候可以有一个默认输出,使用 export default 修饰,可以用来修饰匿名函数。在import这个默认输出的时候需要指定一个名字。参考下面例子:

// module.mjs
let name = 'naisu'
function fun() {
    console.log('fun 233~')
}
export { name }
export default fun
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
// test.mjs
import ff, {name} from './module.mjs'
console.log(name)
ff()
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
ES Module中导出与导入是动态绑定的关系,通过相关的接口还是可以修改内部的值的。这点和 CommonJS 有区别。

上面用 import 导入模块是静态的,会在程序运行之前导入,其实还有一个动态导入的方法 import() ,这个是异步的方法,调用时将返回一个 Promise 。使用方式可以如下:

import('./module.mjs').then((module) => {
    // TODO
});

// 也可以使用await关键字
let module = await import('./module.mjs');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

混合使用

CommonJS 中使用 ES Module 可以使用 import() 方法导入:
在这里插入图片描述
ES Module 中使用 CommonJS 也只能用 import 方式整体导入:
在这里插入图片描述

更多内容可以可以参考下面文章:
阮一峰的网络日志 《Node.js 如何处理 ES6 模块》

总结

总的来说目前Node.js中的模块使用 CommonJS 规范还是最方便的,ES Module 虽然是JavaScript原生标准,但现在在Node.js中使用并不是非常顺畅,不过可以预见的是原生的 ES Module 将来大概率会完全替代现有的 CommonJS 的。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/638358
推荐阅读
相关标签
  

闽ICP备14008679号