首頁  >  文章  >  web前端  >  淺析ECMAScript模組中nodejs如何載入json文件

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

青灯夜游
青灯夜游轉載
2021-12-07 18:49:042451瀏覽

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

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

看完這篇文章,你將學到:

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

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

3、學到import.meta.url

3、學習到new URL()

4.學到load-json-file庫

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

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

淺析ECMAScript模組中nodejs如何載入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.urlnodejs中傳回模組在本地的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方法實作。

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

三、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中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除