ES6 가져오기 및 내보내기에 대한 간단한 1분

6930 단어

이름 가져오기 내보내기


변량

//   
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
//   
import { myVar1, myVar2, MY_CONST } from 'src/mylib';

메서드

//   
export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
//   
import { myFunc, myGeneratorFunc } from 'src/mylib';

클래스

//   
export class MyClass {
    ...
}
//   
import { myFunc } from 'src/mylib';

객체 내보내기 내용 모두 나열

const MY_CONST = ...;
function myFunc() {
    ...
}
//   
export { MY_CONST, myFunc };
//   
import { MY_CONST, myFunc } from 'src/mylib';

이름 변경 내보내기

//   
export { MY_CONST as THE_CONST, myFunc as theFunc };
//   
import { THE_CONST, theFunc } from 'src/mylib';

다른 곳에서 가져온 모듈 내보내기

export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

기본 내보내기

 //------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

이름 내보내기 결합 기본 내보내기

//   
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };
//   
import _, { each } from 'underscore';

default의 별명

//   
import { default as foo } from 'lib';
import foo from 'lib';
//------ module1.js ------
export default 123;
//   
//------ module2.js ------
const D = 123;
export { D as default };

정적 가져오기 내보내기만 지원

//    
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//    
if (Math.random()) {
    exports.baz = ...;
}

왜 이러는지, 주로 두 가지.
  • 성능은 컴파일 단계에서 모든 모듈 가져오기를 완성하고 실행할 때 속도를 낮춘다
  • 더 좋은 검사 오류, 예를 들어 변수 유형에 대한 검사
  • 좋은 웹페이지 즐겨찾기