如何在ecmascript 6中导入json文件？

Question

如何在Ecmascript 6中访问json文件？以下不起作用:

import config from '../config.json'

如果我尝试导入JavaScript文件,这可以正常工作.

Answer 1

在ES6/ES2015中,您可以在代码中导入json文件.

// Babel

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

参考文献:

1. https://hackernoon.com/import-json-into-typescript-8d465beded79

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Answer 2

一个简单的解决方法:

config.js

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

然后...

import config from '../config.js'

不允许导入现有的.json文件,但是可以完成工作.

Answer 3

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

有很多方法可以做到.根据您的需要,您可以查看如何在JavaScript中读取文件(window.FileReader如果您在浏览器中运行,则可以选择)或使用其他问题中描述的其他加载器(假设您使用的是NodeJS).

IMO最简单的方法可能是将JSON作为JS对象放入ES6模块并导出它.这样你就可以在需要的地方导入它.

另外值得注意的是,如果您使用的是Webpack,默认情况下导入JSON文件(从那时起webpack >= v2.0.0).

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

Answer 4

感谢所有提出并实现JSON 模块和Import Assertions的人。从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));

注意：其他浏览器目前可能尚未实现此功能。

Answer 5

根据您的构建工具和 JSON 文件中的数据结构，它可能需要导入default.

import { default as config } from '../config.json';

例如使用范围内 Next.js

Answer 6

我正在使用babel + browserify,我在目录./i18n/locale-en.json中有一个JSON文件,带有翻译命名空间(与ngTranslate一起使用).

无需从JSON文件中导出任何内容(btw不可能),我可以使用以下语法对其内容进行默认导入:

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

Answer 7

在带有 fetch 的浏览器中（现在基本上都是）：

目前，我们不能import使用 JSON mime 类型的文件，只能使用 JavaScript mime 类型的文件。它可能是将来添加的功能（官方讨论）。

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

在 Node.js v13.2+ 中：

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

尝试跑步

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

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

Answer 8

如果您正在使用节点，则可以：

const fs = require('fs');

const { config } = JSON.parse(fs.readFileSync('../config.json', 'utf8')) // May be incorrect, haven't used fs in a long time

要么

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';

要么

import * from '../config.json'

Answer 9

有点晚了，但我在尝试为我的网络应用程序提供分析时偶然发现了同样的问题，该分析涉及基于 package.json 版本发送应用程序版本。

配置如下：React + Redux、Webpack 3.5.6

自 Webpack 2+ 以来，json-loader 并没有做太多事情，因此在对它进行了一些摆弄之后，我最终将其删除。

实际上对我有用的解决方案只是使用 fetch。虽然这很可能会强制执行一些代码更改以适应异步方法，但它工作得很好，特别是考虑到 fetch 将提供动态 json 解码。

所以这里是：

  fetch('../../package.json')
  .then(resp => resp.json())
  .then((packageJson) => {
    console.log(packageJson.version);
  });

请记住，由于我们在这里专门讨论 package.json，因此该文件通常不会捆绑在您的生产构建（甚至开发）中，因此您必须使用 CopyWebpackPlugin 才能访问它在使用 fetch 时。

Answer 10

只需这样做：

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

然后像下面这样使用它：

const config = importedConfig.default;

Answer 11

除了其他答案之外，在 Node.js 中，甚至可以require在 ES 模块内读取 JSON 文件。我发现这在读取其他包内的文件时特别有用，因为它利用 Node 自己的模块解析策略来定位文件。

requireES 模块中必须首先使用createRequire.

这是一个完整的例子：

import { createRequire } from 'module';

const require = createRequire(import.meta.url);
const packageJson = require('typescript/package.json');
console.log(`You have TypeScript version ${packageJson.version} installed.`);

在安装了 TypeScript 的项目中，上面的代码将从 package.json 中读取并打印 TypeScript 版本号。