Maison > interface Web > js tutoriel > le corps du texte

Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript

青灯夜游
Libérer: 2021-12-07 18:49:04
avant
2382 Les gens l'ont consulté

Comment charger des fichiers json dans node dans le module ECMAScript》L'article suivant vous présentera comment nodejs charge les fichiers json dans le module ECMAScript. J'espère qu'il vous sera utile !

Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript

Après avoir lu cet article, vous apprendrez :

1. nodejs Comment charger et analyser les fichiers json

2. Comment le module fs lit les fichiers json

3.

3. Apprenez une nouvelle URL()

4. Apprenez la bibliothèque de fichiers Load-json

Comme nous le savons tous, si vous chargez jsondans le module CommonJS > Fichier. , chargez-le simplement directement via la fonction require(), et vous pourrez obtenir l'objet json. CommonJS模块中加载json文件,只需通过require()函数直接加载即可,即能得到json对象。

但是在ECMAScript模块中直接加载json文件,会报错,报错如下:

Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript

首先,先启用ESM模式,其实官方文档(http://nodejs.cn/api/esm.html#introduction)中也有说明:

Node.js 默认将 JavaScript 代码视为 CommonJS 模块。 作者可以通过 .mjs 文件扩展名、package.json "type" 字段、或 --input-type 标志告诉 Node.js 将 JavaScript 代码视为 ECMAScript 模块

那怎么才能在ECMAScript模块加载json文件呢?其实是有两种方案的:

假设现在有一个json文件:test.json

文件内容如下:

{
    "name": "project"
}
Copier après la connexion

接下来,在index.js中引入test.json:

一、 通过 fs 文件系统读取 json 文件

import { readFile } from "fs/promises"; // 以promise的方式引入 readFile API

const json = JSON.parse(
    await readFile(new URL('./test.json', import.meta.url))
)

console.log('[json1]:', json); // 输出: { "name": "project" }
Copier après la connexion

解释:

await: 根据 ECMAScript 顶层 await 提案await 关键字可用于模块内的顶层(异步函数之外);

import.meta.urlnodejs中返回模块在本地的file://协议的绝对路径,例如:file://home/user/main.js, 如果模块中还有另外一个文件test.js,那么test.js的路径就是new URL('test.js', import.meta.url)

new URL: 生成file: 协议的对象(对于大多数 fs 模块函数,pathfilename 参数可以作为使用 file: 协议的对象传入)。

二、 通过nodejs内置module模块的createRequire方法实现

import { createRequire } from "module";

const require = createRequire(import.meta.url);
const json = require('./test.json');

console.log('[json2]:', json); // 输出: { "name": "project" }
Copier après la connexion

这种方法是根据nodejs提供的createRequire方法实现。

Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript

三、 24行源码的第三方库 load-json-file

Mais si vous chargez directement le fichier json dans le module ECMAScript, une erreur sera signalée. L'erreur est la suivante :

Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript

Tout d'abord, activez le mode ESM. En fait, le document officiel (http://nodejs.cn /api/esm.html#introduction) :

Node.js

traite le code JavaScript comme un module CommonJS par défaut. Les auteurs peuvent transmettre l'extension de fichier .mjs, le champ package.json "type" ou --input-type</code > Flag indique à Node.js de traiter le code JavaScript comme un module ECMAScript <a href="https://www.php.cn/course/list/24.html" target="_blank"></a></p>Alors, comment puis-je charger un fichier <code>json dans le module ECMAScript ? En fait, il y a deux solutions : 🎜🎜Supposons qu'il y ait maintenant un fichier json : test.json🎜🎜Le contenu du fichier est le suivant : 🎜

import {readFileSync, promises as fs} from &#39;node:fs&#39;;

const {readFile} = fs;

const parse = (buffer, {beforeParse, reviver} = {}) => {

	// Unlike `buffer.toString()` and `fs.readFile(path, &#39;utf8&#39;)`, `TextDecoder`` will remove BOM.
        // 这里对buffer进行转义,没有用`buffer.toString()`和`fs.readFile(path, &#39;utf8&#39;)`,是因为`new TextDecoder().decode(buffer)`这种方式可以删除字节顺序标记(BOM)
        
        // 解码 buffer 并返回字符串
	let data = new TextDecoder().decode(buffer);
        
        // 在parse解析之前对字符串进行处理
	if (typeof beforeParse === &#39;function&#39;) {
		data = beforeParse(data);
	}

	return JSON.parse(data, reviver);
};

// 导出异步方法
export async function loadJsonFile(filePath, options) {
        // 如果未指定编码,则返回原始缓冲区。
	const buffer = await readFile(filePath);
	return parse(buffer, options);
}

// 导出同步方法
export function loadJsonFileSync(filePath, options) {
        // 如果未指定编码,则返回原始缓冲区。
	const buffer = readFileSync(filePath);
	return parse(buffer, options);
}
Copier après la connexion
🎜Ensuite, dans index. js Introduisez test.json :🎜

1 Lisez le fichier json via fs<.> système de fichiers 🎜rrreee🎜Explication : 🎜🎜<code>await : Selon Proposition await ECMAScript de niveau supérieur 🎜, le mot-clé await peut être utilisé au niveau supérieur du module (en dehors de la fonction asynchrone) ; 🎜🎜import .meta.url : nodejs renvoie le chemin absolu du protocole file:// local du module, par exemple : file://home/ user/main.js, s'il y a un autre fichier test.js dans le module, alors le chemin de test.js est nouvelle URL ( 'test.js', import.meta.url) ; 🎜🎜nouvelle URL : Générer un objet du protocole file: (pour la plupart des fonctions du module fs, path ou <code>filename peut être transmis en tant qu'objet en utilisant le protocole file:). 🎜

2. Implémentez 🎜rrreee🎜 via la méthode createRequire du module module intégré de nodejs<.> La méthode est implémentée sur la base de la méthode <code>createRequire fournie par nodejs. 🎜🎜Une brève analyse de la façon dont nodejs charge les fichiers json dans le module ECMAScript🎜

3. La bibliothèque tierce de code source de 24 lignes load-json-file🎜🎜🎜load-json-file🎜 a été accidentellement découverte par moi sur le site npm. Le code source ne comporte que 24 lignes, comme suit : 🎜rrreee🎜🎜load-json-file source code🎜 Dans l'ensemble, c'est relativement simple, mais il existe également de nombreux points de connaissances qui peuvent être appris en profondeur. 🎜🎜Pour plus de connaissances sur les nœuds, veuillez visiter : 🎜tutoriel Nodejs🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!