ES6의 "export const"와 "export default"의 비교

ES6의 "export const"와 "export default"의 비교

이 두 가지 사이에 수입할 수 있는 것 외에 큰 차이가 있는지 확인하려고 합니다.export default다음 작업을 수행합니다.

import myItem from 'myItem';

,, 용을 export const 수 있다

import { myItem } from 'myItem';

이 외에 다른 점이나 사용 사례가 있습니까?

이름 있는 내보내기 대 기본 내보내기입니다. export const는 Const 선언 또는 선언을 내보내는 이름 있는 내보내기입니다.

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

내보내기 「」)export default)

파일마다 기본 내보내기를 1개씩 설정할 수 있습니다.Import 시 다음과 같이 이름을 지정하고 Import해야 합니다.

import MyDefaultExport from "./MyFileWithADefaultExport";

원하는 이름을 붙일 수 있습니다.

있는 내보내기 「」 「」( 「」)export)

이름 있는 내보내기를 사용하면 파일당 여러 개의 이름 있는 내보내기를 가질 수 있습니다.그런 다음 괄호로 둘러싸는 특정 내보내기를 Import합니다.

// 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와 함께 사용할 수 있습니다.

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

네임스페이스 Import

오브젝트상의 파일의 모든 것을 Import 할 수도 있습니다.

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할 때, 내보낸 것을 Import할 수 있는 경우, 에서 이름을 선택함으로써 구문에 영향을 줍니다.import"기본값"으로 표시되어 있기 때문에 내보낼 때 이름이 무엇이든 상관없습니다.

내가 좋아하는(그리고 사용하는) 유용한 사용 사례는 함수의 이름을 명시적으로 지정하지 않고 익명 함수를 내보낼 수 있도록 하는 것입니다. 함수의 이름을 지정해야 합니다.

---

예:

함수를 . 는 2개의 함수를 내보냅니다.하나는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

---

?{}구문은 함수(또는 변수)를 Import하는 데 사용됩니다.즉, Import된 것은 모두 내보낼 때 이미 이름이 지정되어 있기 때문에 동일한 이름으로 Import해야 합니다.그렇지 않으면 Import가 동작하지 않습니다.

---

잘못된 예:

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
   

더 중요한 차이점은 다음과 같습니다.export default을 export const/export var/export let에서 아래 합니다( 버전 이상을 사용).nodejs는 es 모듈을 활성화하다(nodejs es 13을 사용).

// a.mjs

export let x = 5;
// or
// let x = 5;
// export { x }

setInterval(() => {
  x++;
}, 1000);

export default x;

// index.mjs
import y, { x } from './1.mjs';

setInterval(() => {
  console.log(y, x);
}, 1000);

# install node 13 or above
node ./index.mjs

출력은 다음과 같습니다.

6 5
7 5
8 5
...
...

이 차이가 필요한 이유

마,는export default commonj의 됩니다.module.exports.

번들러(롤업, 웹 팩)를 사용하여 이를 실현하는 방법

상기 코드의 경우 롤업을 사용하여 번들을 실시합니다.

rollup ./index.mjs --dir build 

빌드 출력:

// build/index.js

let x = 5;
// or
// let x = 5;
// export { x }

setInterval(() => {
  x++;
}, 1000);

var y = x;

setInterval(() => {
  console.log(y, x);
}, 1000);

★★★★★★★에 .var y = x는, 「」입니다.default.

웹 팩지속 는 " "를합니다.Object.defineProperty바인딩(또는 웹 팩에서는 조화 내보내기)을 달성합니다.자세한 내용은 아래 코드를 참조하십시오.

main.js
...
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
...

// 1.js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */
/***/ (function(__webpack_module__, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "x", function() { return x; });
let x = 5;
// or
// let x = 5;
// export { x }

setInterval(() => {
  x++;
}, 1000);

/* harmony default export */ __webpack_exports__["default"] = (x);


/***/ })
]]);

도 이 두 가지 을 찾아보세요./* harmony export (binding) */ ★★★★★★★★★★★★★★★★★」/* harmony default export */.

ES 모듈 네이티브 구현

Mozilla의 es-modules-a-cartoon-deep-dive는 es 모듈에 대한 이유, 내용 및 방법을 알려주었습니다.

주의: 기본 내보내기에서 가져올 경우 이름은 완전히 독립적입니다.이것은 사실 리팩터링에 영향을 미칩니다.

가정해 보겠습니다.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가 Import에 영향을 주지 않습니다.결국 이렇게 됩니다.

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키워드 및 중괄호를 지정합니다., 지금 있기 에, 것을 할 수 있습니다.

export class Foo { }

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

매뉴얼에서 다음 항목을 참조하십시오.

이름 있는 내보내기는 여러 값을 내보낼 때 유용합니다.Import 중에 동일한 이름을 사용하여 해당 값을 참조할 수 있습니다.

디폴트 내보내기에서는 모듈별로 디폴트내보내는 1개뿐입니다.기본 내보내기는 함수, 클래스, 개체 또는 기타 모든 것이 될 수 있습니다.이 값은 가져오기가 가장 간단하므로 "주" 내보내기 값으로 간주됩니다.

default를 설정하면 기본 내보내기라고 불립니다.파일당 하나의 기본 내보내기만 가질 수 있으며 원하는 이름을 가진 다른 파일로 가져올 수 있습니다.기본값(내보내기라는 이름)을 지정하지 않으면 같은 이름으로 다른 파일에 가져와야 합니다.이 파일 안에 물결 괄호가 쳐져 있습니다.

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