在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];

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

即 import STATES from '../data/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表达式时,export将其作为对象的一部分导出,这就是您必须使用的原因

import {STATES}

在这种情况下,你HAVE用于导入工作,否则导入将不能够理解你试图导入什么是正确的文字名称.另请注意,它object destructuring用于导入正确的值.

就像@AlexanderT说的那样,有很多方法可以导入*,实际上有各种方法可以导入和导出,但我希望我解释了它如何import/export工作的核心概念.