Module export/import

yeomi·2018년 11월 12일
0
post-thumbnail

Module

모듈은 구현 세부 사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다.
ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가하였다.
단, 현재 대부분의 브라우저가 ES6의 모듈을 지원하지 않고 있으므로 현재의 브라우저에서 ES6 모듈을 사용하려면 SystemJS, RequireJS 등의 모듈 로더 또는 Webpack 등의 모듈 번들러를 사용하여야 한다.

export

각자 export
// test.js

export const x = 100;
export function hello(name){
	return `Hello, ${name}`;
}
export class Person{
	constructor(job){
    	this.job = job;
    }
}
한번에 export
//test.js

const x = 100;
function hello(name){
	return `Hello, ${name}`;
}
class Person{
	constructor(job){
    	this.job = job;
    }
}

export {x, hello, Person};

import

각자 import
// main.js (test.js와 같은 폴더 내에 있다고 가정)

import {x, hello, Person} from './test' //export한 이름으로 import한다.

console.log(x); //100
console.log(hello('dev')); //Hello, dev
console.log(new Person('dev')); //Person {job: "dev"}
한번에 export
// main.js (test.js와 같은 폴더 내에 있다고 가정)

import * as test from './test'

console.log(test.x); //100
console.log(test.hello('dev')); //Hello, dev
console.log(new test.Person('dev')); //Person {job: "dev"}
profile
궁금한 것들을 공부하며 정리합니다.

0개의 댓글