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

相关推荐
Мартин.7 分钟前
[Meachines] [Easy] Sea WonderCMS-XSS-RCE+System Monitor 命令注入
前端·xss
昨天;明天。今天。2 小时前
案例-表白墙简单实现
前端·javascript·css
数云界2 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
风清扬_jd2 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++
前端·c++·chrome
安冬的码畜日常2 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀:用函数式编程(FP)实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
ChinaDragonDreamer2 小时前
Vite:为什么选 Vite
前端
小御姐@stella2 小时前
Vue 之组件插槽Slot用法(组件间通信一种方式)
前端·javascript·vue.js
GISer_Jing2 小时前
【React】增量传输与渲染
前端·javascript·面试
GISer_Jing2 小时前
WebGL在低配置电脑的应用
javascript
eHackyd2 小时前
前端知识汇总(持续更新)
前端