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

相关推荐
旧梦吟1 天前
脚本网站 开源项目
前端·web安全·网络安全·css3·html5
我有一棵树1 天前
解决 highlight.js 不支持语言的方法
开发语言·javascript·ecmascript
北极糊的狐1 天前
按钮绑定事件达成跳转效果并将树结构id带入子页面形成参数完成查询功能并将返回的数据渲染到页面上2022.5.29
前端·javascript·vue.js
幽络源小助理1 天前
幽络源二次元分享地址发布页源码(HTML) – 源码网免费分享
前端·html
全栈前端老曹1 天前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
用泥种荷花1 天前
【前端学习AI】Python环境搭建
前端
东东的脑洞1 天前
【面试突击】Redis 主从复制核心面试知识点
redis·面试·职场和发展
老华带你飞1 天前
考试管理系统|基于java+ vue考试管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
_Kayo_1 天前
React上绑定全局方法
前端·javascript·react.js
阿蒙Amon1 天前
C#每日面试题-属性和特性的区别
java·面试·c#