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

파일 : SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

나는 export default전에 본 적이 없다 . export default이해하기 쉽도록 동등한 내용 이 있습니까?

여기 에 설명 된 ES6 모듈 시스템의 일부입니다 . 이 문서에는 다음과 같은 유용한 예가 있습니다.

모듈이 기본 내보내기를 정의하는 경우 :

export default function() { console.log("hello!") }

중괄호를 생략하여 기본 내보내기를 가져올 수 있습니다.

import foo from "foo";
foo(); // hello!

업데이트 : 년 6 월 2015, 모듈 시스템에 정의되어 §15.2 하고, export특히 구문에 정의되어 §15.2.3 ECMA 스크립트 2,015 사양.

export default 스크립트 파일에서 단일 클래스, 함수 또는 프리미티브를 내보내는 데 사용됩니다.

내보내기는 다음과 같이 쓸 수도 있습니다.

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

다른 스크립트 파일에서이 함수를 가져 오는 데 사용됩니다.

에 말 app.js , 당신은 할 수 있습니다

import SafeString from './handlebars/safe-string';

수출에 대해 조금

이름에서 알 수 있듯이 스크립트 파일 또는 모듈에서 함수, 객체, 클래스 또는 표현식을 내보내는 데 사용됩니다.

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

가져 와서 사용할 수 있습니다

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

또는

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

내보내기 기본값을 사용하면 훨씬 간단합니다. 스크립트 파일은 하나만 내 보냅니다. cube.js

export default function cube(x) {
  return x * x * x;
};

App.js로 사용

import Cube from 'cube';
console.log(Cube(3)); // 27

export default function(){}함수에 이름이 없을 때 사용할 수 있습니다. 파일에는 기본 내보내기가 하나만있을 수 있습니다. 대안은 명명 된 수출입니다.

이 페이지 는 export default내가 매우 유용하다고 생각한 모듈에 대한 자세한 내용과 함께 자세히 설명 합니다.

나는이 게시물을 작성하고 있기 때문에 (나는 피곤하다고 가정합니다) 나는 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

이 MDN 페이지 에 설명 된대로

이름과 기본값의 두 가지 내보내기 유형이 있습니다. 모듈 당 여러 개의 명명 된 내보내기를 가질 수 있지만 하나의 기본 내보내기 [...] 명명 된 내보내기 만 여러 값을 내보내는 데 유용합니다. 가져 오는 동안 해당 개체의 동일한 이름을 사용해야하지만 기본 내보내기는 모든 이름으로 가져올 수 있습니다.

예를 들면 다음과 같습니다.

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

내 의견에서 기본 내보내기 의 중요한 점 은 모든 이름으로 가져올 수 있다는 것입니다!

기본값을 내보내는 foo.js 파일이있는 경우 :

export default function foo(){}

다음을 사용하여 bar.js로 가져올 수 있습니다.

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

이름 과 기본값 의 두 가지 내보내기 유형이 있습니다. 모듈 당 여러 개의 명명 된 내보내기를 가질 수 있지만 기본 내보내기는 하나만 가능합니다. 각 유형은 위 중 하나에 해당합니다. 출처 : MDN

명명 된 수출

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.

export default 는 단일 클래스, 함수 또는 프리미티브를 내보내는 데 사용됩니다.

함수에 이름이 없으면 export default function () {}을 사용할 수 있습니다. 파일에는 기본 내보내기가 하나만있을 수 있습니다.

더 읽어보기