[javascript] ES6 + 자바 스크립트 모듈 내보내기 옵션

Program / 글쓴이

ES6 모듈의 공개 내보내기가 다음 두 가지 방법으로 수행되는 것을 보았습니다.

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. 둘 다 유효합니까?
  2. 그렇다면 둘 다 존재하는 이유는 무엇입니까?
  3. ES6 구문을 사용하는 모듈 내보내기에 대한 다른 유효한 옵션이 있습니까?

내 googlefu로 답을 찾지 못한 것이 놀랍습니다. CommonJS, RequireJS, AMD, Node 등이 아닌 ES6 모듈 에만 관심이 있습니다 .

답변

1 년 후,이 주제에 대해 내가 찾은 최고의 정보가 있습니다.

수출에는 4 가지 유형이 있습니다. 다음은이를 사용하는 일부 가져 오기와 함께 각각의 사용 예입니다.

내보내기 구문

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

가져 오기 구문

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

출처.

답변

둘 다 유효합니다.

방법 1은 명명 된 내보내기를 제공합니다 . 여기서 핵심은 둘 이상의 것을 내보낼 수 있다는 것입니다. 여러 속성이있는 개체를 내보내는 대신 사용해야합니다. 이름이 지정된 내보내기가있는 모듈을 가져올 때 import {a, b} from c.

방법 2는 기본 내보내기를 제공 합니다 . 기본 내보내기는 하나만있을 수 있습니다. 이는 주로 추가 지원없이 사용할 것으로 예상 되는 class, 또는 단일 항목 과 같은 단일 항목을 내보낼 때 사용됩니다 function. 기본 내보내기로 모듈을 가져올 때 import d from c.

둘 다 사용할 수 있습니다! 가끔 사용 헬퍼의 소수 주요, 주요 기능이 그렇다면 할 수 있습니다 export헬퍼 및 export default기본. 모듈을 가져오고 두 종류의 내보내기가 모두 필요한 경우 import d, {a, b} from c.

또 다른 옵션은 다음과 같이 모듈 끝에 나열하여 이름이 지정된 내보내기를 가져올 수 있다는 것 export {a,b,c}입니다. 이름을 바꿀 수도 있습니다 export {a as $a, b as c}.

나는 이 기사 에서이 모든 것을 얻었으며 , 내가 찾을 수 있었던 최신 es6 모듈 정보에 대한 최고의 소스입니다.

답변

  1. 둘 다 유효합니까?

아니요, export function () { return answer; };유효하지 않습니다. 기본값을 사용하거나 해당 함수 선언에 이름을 추가합니다.

  1. 그렇다면 둘 다 존재하는 이유는 무엇입니까?

그들은하지 않습니다 🙂

  1. ES6 구문을 사용하는 모듈 내보내기에 대한 다른 유효한 옵션이 있습니까?

여기에서 유효한 옵션을 많이 볼 수 있습니다. https://github.com/eslint/espree/pull/43

답변