javascript - 在 es6 中导出/导入 Json 对象

Question

我正在将一些 ES5 代码转换为 ES6。

我在文件 StatesComponent.js 中的某处有以下行

const STATES = require('../data/states.js');

我正在使用 jspm，它不支持 require，所以我想改用 ES6 import 语法。

states.js 文件包含以下内容:

exports.AU = [
    { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
    { value: 'new-south-wales', label: 'New South Wales', className: 'State-NSW' },
    { value: 'victoria', label: 'Victoria', className: 'State-Vic' },

];

exports.US = [
    { value: 'AL', label: 'Alabama', disabled: true },
    { value: 'AK', label: 'Alaska' },
    { value: 'AS', label: 'American Samoa' },
];

STATES 变量被用作 var options = STATES[this.state.country];

如何更改 states.js 中的 json 格式以便我可以“导入”它？

即 从 '../data/states' 导入 STATES

Answer 1

不确定您是否已经得到答案，但您可以将其导出为:-

export default {
  STATES: {
    'AU' : {...},
    'US' : {...}
  }
};

您可以将其导入为:-

import STATES from 'states';

或

var STATES = {};
STATES.AU = {...};
STATES.US = {...};
export STATES;

您可以将其导入为:-

import { STATES } from 'states';

请注意使用 default 和不使用的区别。使用 default 您可以导出任何 javascript 表达式，在导入期间您可以使用任何标识符，它将默认为该 default 表达式。你也可以这样做

import whatever from 'states';

和 whatever 将获得我们分配给 default 的对象的值。

相比之下，当您不导出 default 表达式时，export 会将其导出为对象的一部分，这就是您必须使用的原因

import {STATES}

在这种情况下，您必须使用正确的文字名称才能使导入工作，否则导入将无法理解您尝试导入的内容。另外，请注意它正在使用 object destructuring导入正确的值。

就像@AlexanderT 所说的那样，也有导入为* 的方法，实际上有多种方法可以将import 导入。和 export但我希望我解释了这个 import/export 工作原理的核心概念。