如何在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");

当前回答

简单地这样做:

import * as importedConfig from '../config.json';

然后像下面这样使用它:

const config = importedConfig.default;

其他回答

感谢所有提出并实现JSON模块和Import断言的人。从Chrome 91开始,你可以直接导入JSON,例如:

// test.json
{
    "hello": "world"
}

// Static Import
import json from "./test.json" assert { type: "json" };
console.log(json.hello);

// Dynamic Import
const { default: json } = await import("./test.json", { assert: { type: "json" } });
console.log(json.hello);

// Dynamic Import
import("./test.json", { assert: { type: "json" } })
  .then(module => console.log(module.default.hello));

注意:其他浏览器目前可能还没有实现这个特性。

如果你使用node,你可以:

const fs = require('fs');

const { config } = JSON.parse(fs.readFileSync('../config.json'));

OR

const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');

其他:

// config.js
{
// json object here
}

// script.js

import { config } from '../config.js';

OR

import * from '../config.json'

不幸的是,ES6/ES2015不支持通过模块导入语法加载JSON。但是…

有很多方法可以做到这一点。根据您的需要,您可以研究如何在JavaScript(窗口)中读取文件。如果您在浏览器中运行,FileReader可以是一个选项)或使用其他问题中描述的其他加载器(假设您使用的是NodeJS)。

在我看来,最简单的方法可能是将JSON作为JS对象放入ES6模块并导出它。这样,您就可以在需要的地方导入它。

此外,值得注意的是,如果你使用Webpack,导入JSON文件将默认工作(因为Webpack >= v2.0.0)。

import config from '../config.json';

使用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文件,但执行一个工作。

我使用babel+browserify,我有一个JSON文件在目录。/i18n/locale-en。带有翻译名称空间的json(用于ngTranslate)。

无需从JSON文件中导出任何内容(顺便说一句,这是不可能的),我可以使用以下语法对其内容进行默认导入:

import translationsJSON from './i18n/locale-en';