2016-01-12 45 views
7

Ich konvertiere etwas ES5-Code in ES6.Exportieren/Importieren von Json-Objekten in es6

Ich habe die folgende Zeile irgendwo in der Datei StatesComponent.js

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

ich jspm verwende und es nicht require nicht unterstützt, so möchte ich stattdessen ES6 import Syntax verwenden.

Die states.js Datei enthält folgende Komponenten:

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 Variable wird als var options = STATES[this.state.country];

verwendet werden Wie kann ich das Format der json in states.js ändern, so dass ich kann `Import‘ es?

dh import STATES from '../data/states'

+2

Versuchen Sie 'import * als STATES von '../ data/states.js''; –

+0

Nur zu Ihrer Information: Dies ist kein JSON. Dies sind JavaScript-Literalobjekte. – RoToRa

Antwort

15

Nicht sicher, ob Sie bekam die Antwort auf diese bereits, aber Sie können es exportieren, wie: -

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

, an die Sie importieren als: -

import STATES from 'states'; 

oder

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

, an die Sie importieren als: -

import { STATES } from 'states'; 

Beachten Sie den Unterschied zwischen einer, default und eines, das nicht der Fall ist verwendet. Mit default können Sie jeden Javascript-Ausdruck exportieren und während des Imports können Sie den Bezeichner verwenden, der standardmäßig auf den Ausdruck default gesetzt wird. Sie könnten auch

getan
import whatever from 'states'; 

und whatever würde den Wert eines Objekts erhalten, die wir auf Standard zugewiesen.

Im Gegensatz dazu, wenn Sie nicht exportieren default Ausdruck, export exportiert sie als Teil des Objekts, das ist, warum Sie

import {STATES} 

In diesem Fall verwenden mußten Sie haben das Recht, wörtlichen zu verwenden Name für den Import zu arbeiten oder sonst importieren wird nicht in der Lage zu verstehen, was Sie importieren möchten. Beachten Sie auch, dass object destructuring verwendet wird, um den richtigen Wert zu importieren.

Und wie @AlexanderT sagte, gibt es Möglichkeiten, wie * zu importieren, in der Tat gibt es verschiedene Möglichkeiten, um import und export aber ich hoffe, dass ich das Kernkonzept, wie diese import/export Werke erläutert.