ES6はオブジェクトからすべての値をエクスポートします


112

たとえば./my-module.js、戻り値となるオブジェクトを持つモジュール()があるとします。

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

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

だから私はそれらを次のようにインポートできます:

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

私が見つけた唯一の方法は、エクスポートをハードコーディングすることです:

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

これは動的ではありません。

オブジェクトからすべての値をエクスポートすることは可能ですか?


6
いいえ。動的に計算された値は静的にエクスポートできないためです。
Bergi

@Bergi、どういうわけか値を静的にすることはどういうわけか可能かどうか疑問に思っています。私があなたが使用する場合どうなるかを考えていましたinterface { a: number, b: number, c: number }か?理論的には可能だと思いませんか?
Fleuv

1
@Fleuv export const {a, b, c} = valuesは、その静的インターフェイスを宣言する構文です
Bergi

回答:


39

そうではないようです。ECMAScript 6モジュールからの引用:最終的な構文

疑問に思われるかもしれません–単純にデフォルトのオブジェクト(CommonJSなど)をエクスポートできるのに、なぜ名前付きエクスポートが必要なのでしょうか。その答えは、オブジェクトを介して静的な構造を強制することはできず、関連する利点をすべて失うことはできないということです(次のセクションで説明します)。


3
名前と値のペアがある場合、配列を使用できますか?
Kevin Suttle、2015

79

このソリューションの回避策を実際にお勧めすることはできませんが、機能します。オブジェクトをエクスポートするのではなく、名前付きエクスポートを各メンバーに使用します。別のファイルで、最初のモジュールの名前付きエクスポートをオブジェクトにインポートし、そのオブジェクトをデフォルトとしてエクスポートします。また、最初のモジュールからすべての名前付きエクスポートを使用してエクスポートしますexport * 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

2
なぜこれを勧めないのですか?
jsdario 2016

2
おそらく、治癒が病気よりも悪いためです(公的に消費可能なライブラリを書いていて、そのインポート方法に本当に気を配っているのでない限り)?
machineghost

ええ、それは良い要約です。これは、使いやすさを高めるためにライブラリで一度使用したテクニックです。ライブラリの作成者にとってはもっと手間がかかりますが、1つのファイル内でエクスポートを管理する方が良いと思います。その結果、ユーザーにとってモジュールの深さが1つ少なくなります。
ryanjduffy 2016

私はこの回避策をかなり気に入っていますが、values / index.jsの './values'ではなく './value'にする必要がありますよね?
Jan Paepke

1
すでにエクスポートしている場合{ a, b, c }、なぜ再度エクスポートする必要があるのですか?本当の質問は、const obj = { a, b, c }objのすべてのメンバーだけがあり、それをエクスポートできる場合はどうなりますか?答えはノーだと思います。
windmaomao

14

この醜いが実行可能な解決策を試してください:

// 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);

12

設定ファイルのためにこれを行う必要がありました。

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

export default config;

このようにできます

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

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

Typescriptを使用しています。


34
あなたはできるはずですimport config from './config';
Matt Hamann '19

4
export const a = 1;
export const b = 2;
export const c = 3;

これは今日のBabel変換で機能し、ES2016モジュールのすべての利点を、その機能が実際にブラウザーに実装されるときはいつでも利用できるはずです。

追加することもexport default {a, b, c};できます。これにより、すべての値をオブジェクトなしでオブジェクトとしてインポートできます* as。つまり、import myModule from 'my-module';

出典:


3

私は以下を提案します、module.jsを期待しましょう:

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

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

そして、あなたはindex.jsで行うことができます:

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

オブジェクトの破棄のその他の例:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring


3

すべての回答で、インポート文を変更する必要があります。

使用できるようにしたい場合:

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

質問のように、そしてあなたの中でmy-moduleあなたが1つのオブジェクトにエクスポートする必要があるすべてのものを持っている(これは例えばJoiまたはJSONスキーマでエクスポートされた値を検証したい場合に役立ちます)それからあなたmy-moduleはどちらかでなければなりません:

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

または:

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

きれいではありませんが、必要なものにコンパイルされます。

参照:バベルの例


3

2

変数ファイルから各変数をエクスポートします。次に、他のファイルと同様に*を使用してそれらをインポートし、そのファイルから定数としてエクスポートすると、最初のファイルの名前付きエクスポートが2番目のファイルからエクスポートされたオブジェクトの属性である動的オブジェクトが得られます。

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'

説明も追加していただけますか?
Nilambar Sharma
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.