ES6에서`export const`와`export default '

ES6에서`export const`와`export default '

---

나는 다음을 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'

Now if you refactor your Foo class to be Bar and also rename the file, most IDEs will NOT touch your import. So you will end up with this:

export default class Bar { }

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

Especially in Typescript, I really appreciate named exports and the more reliable refactoring. The difference is just the lack of the default keyword and the curly braces. This btw also prevents you from making a typo in your import since you have type checking now.

export class Foo { }

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

---

From the documentation:

Named exports are useful to export several values. During the import, one will be able to use the same name to refer to the corresponding value.

Concerning the default export, there is only a single default export per module. A default export can be a function, a class, an object or anything else. This value is to be considered as the "main" exported value since it will be the simplest to import.

---

When you put default, its called default export. You can only have one default export per file and you can import it in another file with any name you want. When you don't put default, its called named export, you have to import it in another file using the same name with curly braces inside it.

---

I had the problem that the browser doesn't use es6.

I have fix it with:

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

The type module tells the browser to use ES6.

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

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

Then it should work.

참고URL : https://stackoverflow.com/questions/33611812/export-const-vs-export-default-in-es6