[javascript] ES6의`export const`와`export default ‘

JAVASCRIPT / 글쓴이

나는 다음을 export default수행 하여 가져올 수있는 것 외에이 둘 사이에 큰 차이점이 있는지 확인하려고합니다 .

import myItem from 'myItem';

그리고 export const내가 할 수있는 일 :

import { myItem } from 'myItem';

이 이외의 차이점 및 / 또는 사용 사례가 있는지 궁금합니다.

답변

명명 된 내보내기 대 기본 내보내기입니다. export constconst 선언 또는 선언을 내보내는 명명 된 내보내기입니다.

강조 : 여기에서 중요한 것은 const 선언 또는 선언을 선언하는 데 사용되는 export키워드 const입니다. export클래스 또는 함수 선언과 같은 다른 선언에도 적용될 수 있습니다.

기본 내보내기 ( export default)

파일 당 하나의 기본 내보내기를 가질 수 있습니다. 가져올 때 이름을 지정하고 다음과 같이 가져와야합니다.

import MyDefaultExport from "./MyFileWithADefaultExport";

원하는 이름을 지정할 수 있습니다.

명명 된 수출 ( export)

명명 된 내보내기를 사용하면 파일 당 여러 개의 명명 된 내보내기를 가질 수 있습니다. 그런 다음 중괄호로 묶을 특정 내보내기를 가져옵니다.

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

또는 동일한 명령문에서 명명 된 가져 오기와 함께 기본값을 사용할 수 있습니다.

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

네임 스페이스 가져 오기

객체의 파일에서 모든 것을 가져올 수도 있습니다.

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

노트

  • 이 구문은 사용 사례가 더 일반적이기 때문에 기본 내보내기를 약간 더 간결하게 선호합니다 ( 여기에서 논의 참조 ).

  • 기본 내보내기는 실제로 이름이 지정된 명명 된 내보내기 default이므로 명명 된 가져 오기를 사용하여 가져올 수 있습니다.

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

답변

export default내 보낸 “thing”을 가져올 때, 내 보낸 이름을 무엇이든 상관없이 내 보낸 이름을 가져 와서 내 보낸 모든 것을 가져올 수있을 때 구문이 import“default”로 표시되어 있기 때문에 구문에 영향을줍니다 .

내가 좋아하고 사용하는 유용한 유스 케이스는 명시 적 으로 이름을 지정 하지 않고 익명 함수 를 내보낼 수 있으며 해당 함수를 가져올 때만 이름을 지정해야합니다.

예:

두 가지 기능 내보내기, 하나는 default다음과 같습니다.

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

위 기능을 가져옵니다. default하나 의 이름을 구성 :

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

때 {}구문은 함수 (또는 변수)를 가져 오는 데 사용됩니다 그것은 한 가져온 어떤 것을 의미 이미 내보낼 때 하나가로 가져와야합니다, 그래서 이름이 정확 하지 것 일 다른 가져 오기를 같은 이름, 또는.

잘못된 예 :

  1. 가져 오려면 기본 기능이 먼저 있어야합니다

    import {divide}, square from './module_1.js

  2. divide_1에 내 보내지 않았 module_1.js으므로 가져올 것이 없습니다

    import {divide_1} from './module_1.js

  3. square에 수출되지 module_1.js때문에, {}명시 적으로 검색 할 수있는 엔진을 말한다 라는 이름의 수출 만.

    import {square} from './module_1.js

답변

사소한 참고 : 기본 내보내기에서 가져 오는 경우 이름이 완전히 독립적입니다. 이것은 실제로 리팩토링에 영향을 미칩니다.

Foo해당 가져 오기가있는 이와 같은 클래스가 있다고 가정 해 봅시다 .

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

이제 Foo클래스를 리팩터링 Bar하고 파일 이름을 바꾸면 대부분의 IDE는 가져 오기를 건드리지 않습니다. 그래서 당신은 이것으로 끝날 것입니다 :

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

특히 Typescript에서는 명명 된 내보내기와보다 안정적인 리팩토링에 정말 감사합니다. 차이점은 default키워드와 중괄호 가 없다는 것입니다 . 이 btw는 또한 유형 검사가 있으므로 가져 오기에 오타가 생기지 않도록합니다.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

답변

에서 문서 :

명명 된 내보내기는 여러 값을 내보내는 데 유용합니다. 가져 오는 동안 동일한 이름을 사용하여 해당 값을 참조 할 수 있습니다.

기본 내보내기와 관련하여 모듈 당 하나의 기본 내보내기 만 있습니다. 기본 내보내기는 함수, 클래스, 객체 또는 다른 것이 될 수 있습니다. 이 값은 가져 오기가 가장 간단하기 때문에 “기본”내 보낸 값으로 간주됩니다.

답변

기본값을 설정하면 기본 내보내기라고합니다. 파일 당 하나의 기본 내보내기 만 가질 수 있으며 원하는 이름을 가진 다른 파일로 가져올 수 있습니다. 이름이 지정된 내보내기라는 기본값을 넣지 않으면 중괄호가있는 동일한 이름을 사용하여 다른 파일로 가져와야합니다.

답변

브라우저가 es6을 사용하지 않는다는 문제가있었습니다.

나는 그것을 고쳤다 :

 <script type="module" src="index.js"></script>

유형 모듈은 브라우저에 ES6을 사용하도록 지시합니다.

export const bla = [1,2,3];

import {bla} from './example.js';

그런 다음 작동합니다.

답변