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 格式的文件规则去进行解析。

相关推荐
支支დ11 小时前
VO by Vercel 前端特定优势:为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆11 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF12 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
宿67412 小时前
vue3-async
前端·javascript·vue.js
黄敬峰13 小时前
Agent Memory 进阶:用 LLM 总结压缩上下文,告别"金鱼记忆"
面试
YXWik613 小时前
记录前端请求接口在浏览器请求响应的Preview和Response展示的一样的问题
前端
2501_9289962213 小时前
GPT-4o换DeepSeek迁移成本多少?中科热备解析API聚合平台技术账本
前端·数据库·人工智能
东风破_13 小时前
从跨域到 WebSocket:前端跨域方案、SSE 与双向实时通信详解
前端·后端
原则猫13 小时前
TS 类型工具
前端
excel14 小时前
Nuxt + Twin CSS 中宽度超过屏幕时底部出现空白的原因与解决方案
前端·javascript