[Javascript] ES6 (ES2015) 자바스크립트 모듈 사용법

    - ES6 Module

https://poiemaweb.com/es6-module


//======================
// lib.js

/* // 변수의 공개
export const pi = Math.PI;

// 함수의 공개
export function square(x) {
return x * x;
}

// 클래스의 공개
export class Person {
constructor(name) {
this.name = name;
}
}
*/

const pi = Math.PI;

function square(x) {
return x * x;
}

class Person {
constructor(name) {
this.name = name;
}
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };


//=======================
// app.js
// 브라우저 환경에서는 모듈의 파일 확장자를 생략할 수 없다.
// './' 가 있어야 한다

import { pi, square, Person } from './lib.js'; // *.mjs 는 MIME Type 에러 발생
    해결방법 https://codens.info/1743

 

console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }


import * as lib from './lib.js';

console.log(lib.pi);         // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }



//=======================
// *.html

<script type="module" src="app.js"></script>

//================
// 참고

CommonJS - Node.js
AMD(Asynchronous Module Definition)


트랜스파일링 : ES6 -> ES5 , Babel
- IE 지원을 위해 필요

번들링 : js파일 합치기, WebPack