자바스크립트 - module

코드위의승부사·2019년 11월 29일

Module js

JavaScript

목록 보기

3/8

모듈이란?

다른코드에서 쉽게 로드하고 사용할수 있도록 세부사항을 캡슐화하고 퍼블릭 API로 공개하는 코드 조각이다.

모듈이 필요한 이유

abstract code : 기능성을 전문적인 라이브러리에 위임하기 때문에, 직접 구현해야하는 복잡함을 덜어준다.
encapsulate code : 변화를 원하지 않는 코드를 모듈안에 숨길 수 있다.
reuse code : 반복되는 코드 작성을 막아준다.
manage dependencies : 코드의 재작성 없이 dependencies를 쉽게 바꿀 수 있다.

모듈 포멧

ES6이전에는 공식적으로 정의된 모듈 포멧이 없엇기 때문에, 다양한 모듈 포멧들이 존재 했다.

Asynchronous Module Definition(AMD)
Common JS
Universal Module Definition(UMD)
System.register
ES6 module format

Asyncronous Module Definition(AMD)

//Callng define with a dependency array and a factory function
define(['dep1', 'dep2'], function(dep1,dep2){
  
  //Define the module value by returning a value
  return function () {};
}

CommonJS format

var dep1 = require('./dep1');
var dep2 = require('./dep2');

module.exports = function(){
	// ...
}

ES6

모든 브라우저가 호환을 하고있지 않기 때문에 Babel같은 트랜스컴파일러가 필요하다.

export function sayHello(){
	console.log('hello');
}

import {sayHello} from './lib';
sayHello(); // -> hello

import {sayHello as say} from './lib';
say(); // -> hello

한번에 모든 모듈을 로드 할 수 도 있다.

import * as lib from './lib';
lib.sayHello(); // -> hello

default exports

// Export default function
export default function sayHello(){
	console.log('hello');
}
// Export non-default function
export function sayGoodbye(){
	console.log('Goodbye');
}

import sayHello, {sayGoodbye} from './lib';
sayHello(); // -> hello
sayGoodbye(); // -> Goodbye

모듈 로더

모듈로더는 특정 모듈 포멧으로 쓰여진 모듈들을 해석해서 로드해준다.
모듈로더는 runtime에 실행되면
모듈로더를 브라우저 안에서 로드하고, main app 파일을 로드하게 한다.
모듈로더는 main app 파일을 다운로드하고 처리한 후에 필요한 파일들을 다운로드한다.
콘솔 네트워크 탭에서 다수의 파일들이 모듈로더에 의해 불려진걸 확인할 수 있다.

RequireJs : AMD format의 모듈로더
SystemJs : AMD, CommonJS, UMD or System.register 포멧의 모듈로더

모듈 번들러

모듈번들러는 모듈로더를 대체해준다.
모듈로더와의 차이점은 번들러의 경우 빌드타임때 실행된다.
빌드할 때, 모듈 번들러가 bundle 파일을 생성하고 브라우저에서 번들을 로드한다.
콘솔 네트워크 탭에서 한가지 파일이 로드된걸 확인할 수 있다. 모듈로더는 더이상 필요하지않고, 모든 코드들은 번들에 포함된다.

Browserfiy : bundler for CommonJS modules
Webpack : bundler for AMD, CommonJS, ES6 modules