您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

module.exports和exports,应该用哪个

时间:2023-08-28 14:52:04  来源:  作者: 前端F2E

在这篇文章中,我将介绍如何在 Node.js 中使用模块,重点是如何导出和消费它们。

各种模块格式

由于 JAVAScript 最初没有模块的概念,因此随着时间的推移,出现了各种相互竞争的格式。下面列出了需要注意的主要格式:

  • Asynchronous Module Definition (AMD)[1]格式用于浏览器,使用define函数来定义模块。
  • CommonJS (CJS)[2]格式用于Node.js,使用requiremodule.exports来定义依赖和模块。npm 生态系统就是基于这种格式构建的。
  • ES Module (ESM)格式。从 ES6(ES2015)开始,JavaScript 支持原生模块格式。它使用 export 关键字导出模块的公共 API,使用 import 关键字导入模块。
  • System.register[3]格式用于支持 ES5 中的 ES6 模块。
  • Universal Module Definition (UMD)[4]格式可以用于浏览器和Node.js。当一个模块需要被多个不同的模块加载器导入时,它就会非常有用。

请注意,本文仅涉及 Node.js 的标准 CommonJS格式。

引入模块

Node.js带来了一系列内置模块,这样我们就可以直接在代码中使用而不需要安装它们。要使用它们,我们需要使用require关键字引入模块,并赋值给变量。然后就可以用它来调用模块公开的任何方法。

举个例子,要罗列出目录下的内容,可以使用文件系统模块,以及该模块的readdir方法:

const fs = require('fs');
const folderPath = '/home/jim/Desktop/';

fs.readdir(folderPath, (err, files) => {
  files.forEach(file => {
    console.log(file);
  });
});

请注意,在 CommonJS 中,模块是同步加载的,并按照模块出现的顺序进行处理。

创建并导出模块

现在,让我们看看如何创建自己的模块并导出它。创建user.js文件并添加下列代码:

const getName = () => {
  return 'Jim';
};

exports.getName = getName;

然后在同一文件夹下创建index.js,并添加下列代码:

const user = require('./user');
console.log(`User: ${user.getName()}`);

使用node index.js运行代码,你会在终端上看到下列输出:

User: Jim

发生了啥?好吧,如果你查看user.js文件,你会注意到我们定义了一个getName函数,然后使用exports关键字让它在任意导入的地方可用。在index.js中,我们导入了该函数并执行了它。还需要注意require语句,该模型名称有着./前缀,意味着它是本地文件。还要注意的是,此处不需要添加文件扩展名。

导出多个方法和值

我们可以用同样的方式导出多个方法和值:

const getName = () => {
  return 'Jim';
};

const getLocation = () => {
  return 'Munich';
};

const dateOfBirth = '12.01.1982';

exports.getName = getName;
exports.getLocation = getLocation;
exports.dob = dateOfBirth;

index.js中这么使用:

const user = require('./user');
console.log(
  `${user.getName()} lives in ${user.getLocation()} and was born on ${user.dob}.`
);

上述代码的产出是:

Jim lives in Munich and was born on 12.01.1982.

注意我们给导出的 dateOfBirth 变量起的名字可以是任何我们喜欢的名字(本例中为 dob)。它不必与原始变量名相同。

语法的变化

我还应该提到,可以在导出过程中导出方法和值,而不仅仅是在文件末尾导出。

举个例子:

exports.getName = () => {
  return 'Jim';
};

exports.getLocation = () => {
  return 'Munich';
};

exports.dob = '12.01.1982';

多亏了解构赋值,我们可以挑选想要导入的方法:

const { getName, dob } = require('./user');
console.log(
  `${getName()} was born on ${dob}.`
);

导出默认值

上面的示例中,我们单独导出了函数和值。这对于整个应用程序都可能需要的辅助函数来说非常方便,但当你有一个只导出一样东西的模块时,使用 module.exports 会更常见:

class User {
  constructor(name, age, emAIl) {
    this.name = name;
    this.age = age;
    this.email = email;
  }

  getUserStats() {
    return `
      Name: ${this.name}
      Age: ${this.age}
      Email: ${this.email}
    `;
  }
}

module.exports = User;

index.js中:

const User = require('./user');
const jim = new User('Jim', 37, 'jim@example.com');

console.log(jim.getUserStats());

代码输出如下:

Name: Jim
Age: 37
Email: jim@example.com

module.exports和exports的区别

在开源世界里,你可以会遇到下列语法:

module.exports = {
  getName: () => {
    return 'Jim';
  },

  getLocation: () => {
    return 'Munich';
  },

  dob: '12.01.1982',
};

在这里,我们将想要导出的函数和值分配给 module 上的 exports 属性,当然,这样做效果很好:

const { getName, dob } = require('./user');
console.log(
  `${getName()} was born on ${dob}.`
);

那么,module.exportsexports的不同之处是什么?一个只是另一个的别名吗?

有点,但不完全是……

为了阐明我的意思,我们更改index.js中的代码,打印module的值:

console.log(module);

输出如下:

Module {
  id: '.',
  exports: {},
  parent: null,
  filename: '/home/jim/Desktop/index.js',
  loaded: false,
  children: [],
  paths:
   [ '/home/jim/Desktop/node_modules',
     '/home/jim/node_modules',
     '/home/node_modules',
     '/node_modules' ] }

正如你看到的,module有一个exports属性。在exports上添加一些东西:

// index.js
exports.foo = 'foo';
console.log(module);

输出如下:

Module {
  id: '.',
  exports: { foo: 'foo' },
  ...

为 exports 分配的属性也会将它们添加到 module.exports。这是因为(至少最初)exports 是对 module.exports 的引用。

应该用哪个

由于 module.exports 和 exports 都指向同一个对象,因此使用哪个通常并不重要。例如:

exports.foo = 'foo';
module.exports.bar = 'bar';

这段代码将导致模块的导出对象为 { foo: 'foo', bar: 'bar' }

不过,有一个注意事项。无论你将什么赋值给 module.exports ,都将从你的模块中导出什么。

那么,请看下面的内容:

exports.foo = 'foo';
module.exports = () => { console.log('bar'); };

这样只会导出一个匿名函数。foo 变量将被忽略。

总结

模块已成为 JavaScript 生态系统不可或缺的一部分,它使我们能够将较小的部分组成大型程序。我希望本文能为你介绍如何在 Node.js 中使用模块,并帮助你揭开模块语法的神秘面纱。

  • 本文译自:https://www.sitepoint.com/understanding-module-exports-exports-node-js/

以上就是本文的全部内容,如果对你有所帮助,欢迎点赞、收藏、转发~

参考资料

[1]

Asynchronous Module Definition (AMD):https://en.wikipedia.org/wiki/Asynchronous_module_definition

[2]

CommonJS (CJS):https://en.wikipedia.org/wiki/CommonJS

[3]

System.register:https://Github.com/systemjs/systemjs/blob/master/docs/system-register.md

[4]

Universal Module Definition (UMD):https://riptutorial.com/javascript/example/16339/universal-module-definition--umd-

 



Tags:module   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
module.exports和exports,应该用哪个
在这篇文章中,我将介绍如何在 Node.js 中使用模块,重点是如何导出和消费它们。各种模块格式由于 JavaScript 最初没有模块的概念,因此随着时间的推移,出现了各种相互竞争的格式...【详细内容】
2023-08-28  Search: module  点击:(251)  评论:(0)  加入收藏
Android开发:当前项目以Module形式引用别的项目的步骤
前言在Android开发过程中,有些时候会根据需要引用别的项目到当前项目里面,而且以Module形式引用。所以本篇博文就来分享一下怎么以Module形式引用别的项目到当前项目中,方便开...【详细内容】
2021-12-07  Search: module  点击:(449)  评论:(0)  加入收藏
教你编写你的第一个Linux 内核模块“hello_module”
前言:Linux 内 核 模 块 全 称 为 “ 动 态 可 加 载 内 核 模 块 (Loadable Kernel Module,LKM)”,是系统内核向外部提供的功能插口。作为宏内核结构,Linux 内核具有效率高的...【详细内容】
2020-07-16  Search: module  点击:(413)  评论:(0)  加入收藏
10分钟将你的Go工程转换为Go Module模式
自从在Go 1.11和更高版本中引入了Go的新的依赖管理系统以来,GoLang开发人员已经接受了包版本控制解决方案。这样做的用户可以使用GoCenter存储库中的 不可变 公共Go 模块,并通...【详细内容】
2020-03-05  Search: module  点击:(315)  评论:(0)  加入收藏
利用宝塔自建linux+nginx-rtmp-module直播服务器的正确方法
说明比较长,需要一定的操作动手能力才行。基础条件 第一个必须是linux服务器 第二个安装了宝塔面板 第三编译安装nginx1.7.6+php5.61第一步修改/www/server/panel/install/ng...【详细内容】
2020-02-06  Search: module  点击:(1434)  评论:(0)  加入收藏
Python3.7编译常见报错之“No module named ‘_ctypes’”
之前用的很多都是Python3.6版本,所以不知道3.7版本在编译安装时居然有一个小坑,这里简单记录一下,以作备忘!报错信息Traceback (most recent call last): File "/opt/Python-3.7...【详细内容】
2019-09-09  Search: module  点击:(3893)  评论:(0)  加入收藏
实现一个 Golang Module Proxy
在前两篇文章(Golang 模块获取包modfetch研读,Golang模块代理goproxy.io源码研读),我们学习了Golang Module Proxy的工作原理以及实现原理。本文尝试独立实现一个Golang Module...【详细内容】
2019-09-02  Search: module  点击:(773)  评论:(0)  加入收藏
一文详细了解 Go Module
1 速览在正式了解Golang Modules之前,我们先速览一下其使用方式。在$GOPATH之外的任意地方,创建一个文件夹:$ mkdir -p /tmp/hello$ cd /tmp/hello然后初始化一个新的Module:$...【详细内容】
2019-08-29  Search: module  点击:(1006)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(11)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(68)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(37)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条