如何在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.js中执行诸如const data = require('./some-file.json')之类的require调用。

但是现在你能在Node.js中使用导入断言吗?

在撰写本文时，当前的Node.js LTS (v18.12)仍然将导入断言标记为实验性。

这篇文章解释了在ES模块中处理JSON的方法，如果你还不想使用实验特性的话。

选项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:利用CommonJS的require函数来加载JSON文件

文档还说明了可以使用createRequire加载JSON文件。这种方法是Pawel在他的博客文章中建议的方法。

createRequire允许你构造一个CommonJS require函数来使用典型的CommonJS特性，比如在Node.js EcmaScript模块中读取JSON。

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

当前回答

在一个带有fetch的浏览器中(基本上现在都有了):

目前，我们不能导入JSON mime类型的文件，只能导入JavaScript mime类型的文件。这可能是将来添加的一个功能(官方讨论)。

fetch('./file.json')
  .then(response => response.json())
  .then(obj => console.log(obj))

在Node.js v13.2+:

它目前需要——experimental-json-modules标志，否则默认情况下不支持。

尝试运行

node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"

并查看输出到控制台的obj内容。

2020-03-21 03:56:55

其他回答

使用ES模块导入JSON已于2020年年中作为特性提交给TC39，并且(在此编辑时)处于第3阶段，这是在规范中接受之前的最后一个阶段(详情请参阅https://github.com/tc39/proposal-json-modules)。一旦登陆，你将能够使用它作为:

import someName from "./some/path/to/your/file.json";

其中someename实际上是JSON数据描述的JS对象的变量名。(当然，请注意，这是从JSON源导入JavaScript，而不是“导入JSON”)。

如果您正在使用足够现代的捆绑器(如esbuild或类似的)，或者您正在使用足够新的编译器(如babel)，那么您已经可以使用此语法而不必担心支持。

或者，如果你拥有JSON文件的所有权，你也可以将你的JSON转换成有效的JS文件，只需要最少的额外代码:

config.js

export default
{
  // my json here...
}

然后……

import config from '../config.js'

不允许导入现有的.json文件，但执行一个工作。

2016-10-04 14:46:31

导入JSON文件仍处于实验阶段。它可以通过下面的标志来支持。

——experimental-json-modules

否则，你可以直接用fs加载相对于import.meta.url的JSON文件

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

你也可以使用module.createRequire()

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

2021-01-22 22:03:50


let filePath = '../../data/my-file.json'

let arrayImport = await import(filePath, {
  assert: { type: "json" },
});
const inputArray = arrayImport.default 

console.log('result', inputArray)

更多信息在这里:v8 -动态导入()。

2022-08-07 23:35:11

在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

2018-06-13 06:56:45