A brief analysis of how nodejs loads json files in the ECMAScript module

ECMAScript modulenodeHow to load json files》The following article will introduce to you how nodejs loads json files in the ECMAScript module. I hope it will be helpful to everyone!

After reading this article, you will learn:

1, nodejs How to load and parse json files

2. How to read json files in fs module

3. Learn about import.meta.url

3. Learn about new URL()

4. Learn the load-json-file library

As we all know, if you load a json file in the CommonJS module, just pass require ()The function can be loaded directly, and the json object can be obtained.

But when loading the json file directly in the ECMAScript module, an error will be reported. The error is as follows:

First, enable ESM mode, in fact, the official document (http://nodejs.cn/api/esm.html#introduction) also explains:

Node.js will be used by default JavaScript code is treated as a CommonJS module. Authors can tell Node via the .mjs file extension, package.json "type" field, or --input-type flag .js treats JavaScript code as an ECMAScript module

So how can I load a json file in the ECMAScript module? In fact, there are two solutions:

Assume there is a json file now: test.json

The content of the file is as follows:

{
    "name": "project"
}

Next, Introduce test.json: into

index.js

1. Read the json file through the fs file system

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" }

Explanation:

await: According to ECMAScript top-level await proposal, await keyword Can be used at the top level within the module (outside the asynchronous function);

import.meta.url：nodejsReturns the module’s local file:/ /The absolute path of the protocol, for example: file://home/user/main.js, if there is another file test.js in the module, then ## The path of #test.js is new URL('test.js', import.meta.url);

new URL: Generate file: An object of the protocol (for most fs module functions, the path or filename parameter can be used as file: The object of the protocol is passed in).

2. Implementation through the

createRequire method of the nodejs built-in module module

import { createRequire } from "module";

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

console.log('[json2]:', json); // 输出： { "name": "project" }

This method is based on

The createRequire method provided by nodejs is implemented.

3. Third-party library with 24 lines of source code

load-json-file

load-json-file I accidentally discovered it on the npm website. The source code only has 24 lines, as follows:

import {readFileSync, promises as fs} from 'node:fs';

const {readFile} = fs;

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

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

load-json-file source code Overall, it is relatively simple, but there are many things that can be done Learn to dig deep into the knowledge points.

For more node-related knowledge, please visit:

nodejs tutorial! !

The above is the detailed content of A brief analysis of how nodejs loads json files in the ECMAScript module. For more information, please follow other related articles on the PHP Chinese website!