淺析ECMAScript模組中nodejs如何載入json文件

ECMAScript模組中node如何載入json檔案》下面這篇文章就來跟大家介紹一下nodejs在ECMAScript 模組中載入json檔案的方法，希望對大家有幫助！

看完這篇文章，你將學到：

1、nodejs 如何載入、解析json文件

2、fs 模組如何讀取json檔案

3、學到import.meta.url

3、學習到new URL()

4.學到load-json-file庫

眾所周知，如果是在CommonJS模組中加載json文件，只需透過require ()函數直接載入即可，即能得到json物件。

但是在ECMAScript模組中直接載入json文件，會報錯，報錯如下：

首先，先啟用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"
}

接下來，在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" }

解釋：

await: 根據 ECMAScript 頂層 await 提案，await 關鍵字可用於模組內的頂層（非同步函數之外）;

import.meta.url：nodejs中傳回模組在本地的file:/ /協定的絕對路徑，例如：file://home/user/main.js, 如果模組中還有另外一個檔案test.js,那麼test.js的路徑就是new URL('test.js', import.meta.url);

new URL： 生成file: 協定的物件（對於大多數 fs 模組函數，path 或 filename 參數可以使用 #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" }

這種方法是根據 nodejs提供的createRequire方法實作。

三、24行原始碼的第三方函式庫load-json-file

load-json-file 是我在npm網站無意間發現的，原始碼只有僅僅24行，如下：

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 原始碼 整體而言相對比較簡單，但是也有很多可以學習深挖的學習的知識點。

更多node相關知識，請造訪：nodejs 教學！ ！

以上是淺析ECMAScript模組中nodejs如何載入json文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！