[javascript] 자바 스크립트에서 ‘내보내기 기본값’이란 무엇입니까?

나는이 게시물을 작성하고 있기 때문에 (나는 피곤하다고 가정합니다) 나는 MDN을 이해하지 못했고 다른 사람들의 설명과 다른 사람들의 설명과 무언가를 이해하는 가장 좋은 방법은 다른 사람들에게 그것을 가르치는 것입니다. 그것은 단지 질문에 대한 간단한 대답을 보지 못합니다.

자바 스크립트에서 ‘내보내기 기본값’이란 무엇입니까?

기본 내보내기에서 가져 오기의 이름 지정은 완전히 독립적이며 원하는 이름을 사용할 수 있습니다.

이 예제를 간단한 예제로 설명하겠습니다.

3 개의 모듈과 index.html이 있다고 가정 해 보겠습니다.

• modul.js
• modul2.js
• modul3.js
• index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

출력은 다음과 같습니다.

modul.js:2:10   -> Modul: Saying hello!
index.html:7:9  -> Module: 123
modul2.js:2:10  -> Module2: Saying hello for the second time!
index.html:10:9 -> Module2: 456
modul3.js:2:10  -> Module3: Saying hello for the third time!

자세한 설명은 다음과 같습니다.

모듈에 대해 단일 항목을 내보내려면 ‘내보내기 기본값’이 사용됩니다.

따라서 중요한 것은 ” ‘./modul3.js’에서 blabla 가져 오기 “입니다. 대신 다음과 같이 말할 수 있습니다.

” ‘ ./modul3.js 에서 pamelanderson 가져 오기 “및 pamelanderson (); 이것은 ‘export default’를 사용할 때 잘 작동하며 기본적으로 이것이 기본값 입니다. 기본값 일 때 원하는 이름을 지정할 수 있습니다 .

Ps 예제를 테스트하려면 먼저 파일을 작성한 다음 브라우저에서 CORS 를 허용 하십시오.-> 브라우저 URL에서 firefox 유형을 사용하는 경우 : about : config-> “privacy.file_unique_origin”검색-> 변경 “false”-> index.html 열기-> F12 키를 눌러 콘솔을 열고 출력을 확인하십시오-> 즐기십시오. cors 설정을 기본값으로 되 돌리는 것을 잊지 마십시오.

Ps2 바보 같은 변수 이름으로 죄송합니다

추가 정보 @
link2medium , link2mdn1 , link2mdn2

답변

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

export default function foo(){}

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

import Foo from 'path-to-file' // this will assign any default export to Foo.