☰

ECMAScript 6でJSONファイルをインポートするにはどうすればいいですか? 質問する

tag-icon • tag-icon json import ecmascript-6
ECMAScript 6でJSONファイルをインポートするにはどうすればいいですか? 質問する

ECMAScript 6 で JSON ファイルにアクセスするにはどうすればよいですか?

以下は機能しません:

import config from '../config.json'

JavaScript ファイルをインポートしようとすると、これは正常に機能します。

https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/

ES モジュールは、Node.js の世界ではまだ比較的新しいものです (Node 14 以降は安定しています)。モジュールにはモジュールシステムが組み込まれており、トップレベルの待機などの機能があります。。

私は有益なPawel Grzybek による ES モジュールに関する投稿そして、現在 ES モジュールに JSON ファイルをインポートできないことを知りました。

import info from `./package.json` assert { type: `json` };


const { default: info } = await import("./package.json", {
  assert: {
    type: "json",
  },
});

私はNode.jsrequireなどでの呼び出しにかなり慣れているので、これは本当に残念です。const data = require('./some-file.json')

しかし、現在 Node.js でインポートアサーションを使用できるのでしょうか?

執筆時点では、現在のNode.js LTS（v18.12）では、インポートアサーションはまだ実験的なものとしてマークされています。。

JSONこの投稿では、まだ実験的な機能を使用したくない場合に、ES モジュールで対処する方法について説明します。

オプション1: JSONファイルを自分で読み取って解析する

Node.js のドキュメントでは、fsモジュールを使用して、ファイルを読み取って解析する作業を自分で行うことを推奨しています。

import { readFile } from 'fs/promises';
const json = JSON.parse(
  await readFile(
    new URL('./some-file.json', import.meta.url)
  )
);

オプション2: CommonJSrequire関数を利用してJSONファイルを読み込む

ドキュメントには、使用createRequireJSON ファイルをロードします。このアプローチは、Pawel がブログ記事でアドバイスしている方法です。

createRequirerequireNode.js EcmaScript モジュールで JSON の読み取りなどの一般的な CommonJS 機能を使用するためのCommonJS 関数を構築できます。

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");

ベストアンサー1

TypeScript または Babel を使用すると、コードにjsonファイルをインポートできます。

// Babel

import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

参照：https://hackernoon.com/import-json-into-typescript-8d465beded79

おすすめ記事