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

当前回答

我使用

Vuejs，版本:2.6.12 Vuex，版本:3.6.0 Vuex-i18n，版本:1.13.1。

我的解决方案是:

messages.js:

import Vue from 'vue'
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsPl from './messages_pl'
import translationsEn from './messages_en'

Vue.use(Vuex);

export const messages = new Vuex.Store();

Vue.use(vuexI18n.plugin, messages);

Vue.i18n.add('en', translationsEn);
Vue.i18n.add('pl', translationsPl);

Vue.i18n.set('pl');

messages_pl.json:

{
    "loadingSpinner.text:"Ładowanie..."
}

messages_en.json:

{
    "loadingSpinner.default.text":"Loading..."
}

majn.js

import {messages} from './i18n/messages'
Vue.use(messages);

2021-02-04 14:28:36

其他回答


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

根据您的构建工具和JSON文件中的数据结构，可能需要导入默认值。

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

例如，在Next.js中使用

2019-06-19 13:10:24

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

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

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

2017-01-31 00:07:45

我用它安装插件“babel-plugin-inline-json-import”，然后在.balberc中添加插件。

安装插件 NPM install——save-dev babel-plugin-inline-json-import babelrc中的配置插件 “插件”:( “inline-json-import” ］

这是我使用它的代码

import es from './es.json'
import en from './en.json'

export const dictionary = { es, en }

2021-01-08 22:53:13

如果你使用node，你可以:

const fs = require('fs');

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

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'

2019-01-18 21:00:05

如何在ECMAScript 6导入JSON文件?

推荐文章

最新文章

标签