ES6 exportiert alle Werte aus dem Objekt

112

Angenommen, ich habe ein Modul ( ./my-module.js) mit einem Objekt, dessen Rückgabewert sein sollte:

let values = { a: 1, b: 2, c: 3 }

// "export values" results in SyntaxError: Unexpected token

So kann ich sie importieren wie:

import {a} from './my-module'           // a === 1
import * as myModule from './my-module' // myModule.a === 1

Der einzige Weg, den ich gefunden habe, ist die harte Codierung der Exporte:

export let a = values.a
export let b = values.b
export let c = values.c
// or:
export let {a, b, c} = values

Welches ist nicht dynamisch.

Ist es möglich, alle Werte aus einem Objekt zu exportieren?

Mauvm
quelle
6
Nein, da dynamisch berechnete Werte nicht statisch exportiert werden können.
Bergi
@Bergi, ich frage mich, ob es irgendwie möglich ist, die Werte irgendwie statisch zu machen. Ich habe darüber nachgedacht, was passiert, wenn Sie eine verwenden interface { a: number, b: number, c: number }? Theoretisch sollte es möglich sein, oder?
Fleuv
1
@Fleuv export const {a, b, c} = valuesist genau die Syntax, um diese statische Schnittstelle zu deklarieren
Bergi

Antworten:

39

Scheint nicht so. Zitat aus ECMAScript 6-Modulen: die endgültige Syntax :

Sie fragen sich vielleicht, warum wir benannte Exporte benötigen, wenn wir Objekte (wie CommonJS) einfach standardmäßig exportieren könnten. Die Antwort ist, dass Sie eine statische Struktur nicht über Objekte erzwingen können und alle damit verbundenen Vorteile verlieren (beschrieben im nächsten Abschnitt).

Joel Richard
quelle
3
Könnten Sie ein Array verwenden, wenn es Name-Wert-Paare hat?
Kevin Suttle
79

Ich kann diese Lösung nicht wirklich empfehlen, aber sie funktioniert. Anstatt ein Objekt zu exportieren, verwenden Sie benannte Exporte für jedes Mitglied. Importieren Sie in einer anderen Datei die benannten Exporte des ersten Moduls in ein Objekt und exportieren Sie dieses Objekt standardmäßig. Exportieren Sie auch alle genannten Exporte aus dem ersten Modul mitexport * from './file1';

values ​​/ value.js

let a = 1;
let b = 2;
let c = 3;

export {a, b, c};

values ​​/ index.js

import * as values from './value';

export default values;
export * from './value';

index.js

import values, {a} from './values';

console.log(values, a); // {a: 1, b: 2, c: 3} 1
ryanjduffy
quelle
2
Warum würden Sie das nicht empfehlen?
jsdario
2
Vielleicht, weil die Heilung schlimmer ist als die Krankheit (es sei denn, Sie schreiben eine öffentlich konsumierbare Bibliothek und sind wirklich wählerisch, wie sie importiert wird)?
Machineghost
Ja, das ist eine gute Zusammenfassung. Es ist eine Technik, die ich einmal in der Bibliothek verwendet habe, um die Verbrauchbarkeit zu vereinfachen. Ich denke, es wäre besser, die Exporte in einer einzigen Datei zu verwalten, obwohl es mehr Arbeit für den Bibliotheksautor ist. Das Ergebnis ist eine Modultiefe weniger für den Benutzer.
Ryanjduffy
Ich mag diese Problemumgehung sehr, aber sie sollte in values ​​/ index.js './value' anstelle von './values' sein, oder?
Jan Paepke
1
Ich glaube wirklich nicht, dass dies die Antwort ist, denn wenn ich bereits exportiere { a, b, c }, warum muss ich dann erneut exportieren? Die eigentliche Frage ist, was ist, wenn ich nur const obj = { a, b, c }alle Mitglieder von obj exportieren kann und kann? Ich denke die Antwort ist NEIN.
Windmaomao
14

Versuchen Sie diese hässliche, aber praktikable Lösung:

// use CommonJS to export all keys
module.exports = { a: 1, b: 2, c: 3 };

// import by key
import { a, b, c } from 'commonjs-style-module';
console.log(a, b, c);
springuper
quelle
12

Ich musste dies nur für eine Konfigurationsdatei tun.

var config = {
    x: "CHANGE_ME",
    y: "CHANGE_ME",
    z: "CHANGE_ME"
}

export default config;

Sie können es so machen

import { default as config } from "./config";

console.log(config.x); // CHANGE_ME

Dies verwendet wohlgemerkt Typescript.

mikeysee
quelle
34
Sie sollten in der Lage seinimport config from './config';
Matt Hamann
4
export const a = 1;
export const b = 2;
export const c = 3;

Dies funktioniert heute mit Babel-Transformationen und sollte alle Vorteile von ES2016-Modulen nutzen, wenn diese Funktion tatsächlich in einem Browser landet.

Sie können auch hinzufügen, export default {a, b, c};wodurch Sie alle Werte als Objekt ohne das importieren können * as, d. H.import myModule from 'my-module';

Quellen:

Jon z
quelle
3

Ich schlage Folgendes vor, erwarten wir ein module.js :

const values = { a: 1, b: 2, c: 3 };

export { values }; // you could use default, but I'm specific here

und dann können Sie in einer index.js tun :

import { values } from "module";

// directly access the object
console.log(values.a); // 1

// object destructuring
const { a, b, c } = values; 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// selective object destructering with renaming
const { a:k, c:m } = values;
console.log(k); // 1
console.log(m); // 3

// selective object destructering with renaming and default value
const { a:x, b:y, d:z = 0 } = values;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 0

Weitere Beispiele für die Zerstörung von Objekten: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

RiZKiT
quelle
3

Jede Antwort erfordert eine Änderung der Importanweisungen.

Wenn Sie verwenden möchten:

import {a} from './my-module'           // a === 1
import * as myModule from './my-module' // myModule.a === 1

Wie in der Frage, und in Ihrem haben my-moduleSie alles, was Sie zum Exportieren benötigen, in einem Objekt (was nützlich sein kann, z. B. wenn Sie die exportierten Werte mit Joi oder JSON Schema validieren möchten), dann my-modulemüssten Sie entweder:

let values = { a: 1, b: 2, c: 3 }
let {a, b, c} = values;
export {a, b, c};

Oder:

let values = { a: 1, b: 2, c: 3 }
export let {a, b, c} = values;

Nicht schön, aber es kompiliert nach Ihren Wünschen.

Siehe: Babel Beispiel

rsp
quelle
2

Exportieren Sie jede Variable aus Ihrer Variablendatei. Wenn Sie sie dann wie in Ihrer anderen Datei mit * importieren und als Konstante aus dieser Datei exportieren, erhalten Sie ein dynamisches Objekt, wobei die benannten Exporte aus der ersten Datei Attribute für das aus der zweiten exportierte Objekt sind.

Variables.js

export const var1 = 'first';
export const var2 = 'second':
...
export const varN = 'nth';

Other.js

import * as vars from './Variables';

export const Variables = vars;

Third.js

import { Variables } from './Other';

Variables.var2 === 'second'
Tanya Randstoft
quelle
Können Sie bitte auch eine Erklärung hinzufügen?
Nilambar Sharma