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

네, 좋은 요약입니다. 소모품을 쉽게하기 위해 라이브러리에서 한 번 사용한 기술입니다. 라이브러리 작성자에게는 더 많은 작업이기는하지만 단일 파일 내에서 내보내기를 관리하는 것이 더 낫다고 생각합니다. 그 결과 사용자의 모듈 깊이가 하나 줄어 듭니다.
ryanjduffy

이 해결 방법이 마음에 들지만 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';
마 하만

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 문을 변경해야합니다.

사용할 수 있도록하려면 :

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

질문에서와 같이 my-module하나의 객체로 내보내는 데 필요한 모든 것이 있습니다 (예를 들어 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;

예쁘지는 않지만 필요한 것으로 컴파일됩니다.

참조 : Babel 예제


3

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 샤르마
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.