[Vue.js] ECMAScript 2015(ES6) 모듈 사용 및 Vue 번들링

모듈(Module)

• 변수,  함수, 클래스, 인스턴스의 집합을 독립된 파일(~.js, ~.vue)로 만든 것
• 모듈로 만들어 필요한 기능만 여러 프로그램에서 재사용
• 모듈 내부에서 export 된 것만 외부 프로그래에서 사용 가능

    ↳ export : 개수와 상관없이 내보내기 가능

export const 변수명 = …;
export function 함수명 = { … };
export class 클래스명 { … };

    ↳ export default : 기본 한 개만 내보내기 가능

export default 변수명;
export default 함수명;
export default 클래스명;
export default { … };

 

사용 예시

test.js

export function fun1() { … }
export function fun2() { … }

function fun3() { … }

export default fun3;

 

test.html

<script type=“module”>
    import fun3, { fun1, fun2 } from “./test.js”;
    fun1();
    fun2();
    fun3(); 
</script>

• <script type=“module”>
  • 외부 모듈 사용시 기술
• import문에서 export 된 것과 export default 된 것의 순서 중요
  • export default 된 것을 가장 먼저 기술!

 

Vue 프로젝트 번들링(Bundling)

Vue 프로젝트의 번들링 흐름

Vue는 webpack을 이용해서 각각의 모듈 파일(.vue 파일)을 JavaScript 코드로 변경 후 하나의 파일 또는 여러 파일로 합침(번들링)