- 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
'Code > JavaScript' 카테고리의 다른 글
[Javascript] ES6 다이나믹 모듈 (Dynamic Module) (0) | 2019.07.30 |
---|---|
[Javascript] 자바스크립트 모듈 로더 (0) | 2019.07.28 |
[Javascript] Babel 사용법 (0) | 2019.07.28 |
[Javascript] Browserify 사용법 (0) | 2019.07.28 |
[Javascript] Grunt 사용법 (0) | 2019.07.28 |