require 支持加载哪些类型资源❓

大家好,我是哈默。今天我们来简单说一下 require 支持加载哪些类型资源。

支持加载的资源类型

require 支持三种类型的文件加载:

  1. .js
  2. .json
  3. .node

.js 类型的文件

对于 .js 类型的文件,我们需要在文件内部通过 module.exports 或者 exports.xxx 的方式导出数据。

使用 module.exports:

js 复制代码
// index.js
const module1 = require("./module1.js");

console.log(module1.a);
console.log(module1.add(10, 20));

// ./module1.js
module.exports = {
  a: 10,
  add: function (num1, num2) {
    return num1 + num2;
  },
};

最终打印结果为:

js 复制代码
10;
30;

使用 exports.xxx:

js 复制代码
// index.js
const module1 = require("./module2.js");

console.log(module1.a);
console.log(module1.add(10, 20));

// ./module2.js
exports.a = 10;
exports.add = function (num1, num2) {
  return num1 + num2;
};

最终打印结果为:

js 复制代码
10;
30;

.json 类型的文件

对于 .json 类型的文件,我们在 require 的时候,会对 json 文件里的数据进行 JSON.parse()

比如我们最常见的 package.json 文件:

js 复制代码
// package.json
{
  "name": "blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vitepress": "^1.0.0-beta.5"
  }
}

最终打印结果:

.node 类型的文件

.node 类型的文件是 C++ 扩展程序。

因为 node 本身就是由 C++ 编写的,所以预留了编写 C++ 扩展程序的接口,不过这种类型的文件我们一般不会接触到。

任意文件

其实 require 还可以加载其他类型的文件,但是会把其他类型的文件当成 .js 文件来处理。

又因为 .js 文件当中需要使用 module.exports 或者 exports.xxx 这种语法,所以其他类型的文件如果满足这种语法的话,依旧可以正常解析。

比如:我们有一个 README.md 文件:

js 复制代码
// index.js
const readme = require("./README.md");

console.log(readme);

// ./README.md
## 项目介绍
这是一段项目介绍

## 项目结构
...

解析失败,因为不满足格式:

但假如我们对 README.md 做一个变更,使其符合期望的格式时:

js 复制代码
// index.js
const readme = require("./README.md");

console.log(readme);
console.log(readme.name);
readme.print();

// ./README.md
module.exports = {
  name: "readme",
  print: function () {
    console.log("我是 readme");
  },
};

解析就成功了:

总结

require 支持加载的文件格式一般是 3 种:.js / .json / .node,但其实它也能导入其他类型的文件,但是会用 .js 格式的文件规则去进行解析。

相关推荐
热忱112824 分钟前
elementUI Table组件实现表头吸顶效果
前端·vue.js·elementui
林涧泣32 分钟前
【Uniapp-Vue3】setTabBar设置TabBar和下拉刷新API
前端
翻晒时光33 分钟前
Java 多线程与并发:春招面试核心知识
java·jvm·面试
Rhys..37 分钟前
Jenkins pipline怎么设置定时跑脚本
运维·前端·jenkins
Like_wen43 分钟前
【Go面试】工作经验篇 (持续整合)
java·后端·面试·golang·gin·复习
易林示1 小时前
chrome小插件:长图片等分切割
前端·chrome
翻晒时光1 小时前
探秘 Java IO 与 NIO:春招面试知识要点
java·面试·nio
w(゚Д゚)w吓洗宝宝了1 小时前
单例模式 - 单例模式的实现与应用
开发语言·javascript·单例模式
zhaocarbon1 小时前
VUE elTree 无子级 隐藏展开图标
前端·javascript·vue.js
浏览器爱好者2 小时前
如何在AWS上部署一个Web应用?
前端·云计算·aws