javascript module , import 와 requires

모듈의 의미는 개발해야 하는 어플리케이션의 크기가 커지면서 언젠간 파일을 분리하고 기능을 분리해야 하는 시점이 온다. 이때 분리된 각각의 파일을 모듈이라고 부르게 된다. 모듈은 javascript 뿐만 아니라 우리가 사용하는 모든 언어에서 이렇게 칭할 수 있다.

모듈 소개

모듈 소개

import vs require (ES6 와 CommonJS)

둘다 모듈을 불러올때 사용하는 키워드 이며. 외부 파일이나 라이브러리를 불러올때 사용한다.

require는 NodeJS 에서 사용되고있는 commonJS 키워드 이고, import 는 ES2015 (E6)에서 새롭괸 키워드 이다. 둘다 파일을 불러오고 모듈을 사용할수 있게 해주지만 사용방법은 조금씩 다르다.

 

Module 사용법

• 모듈 생성

class PageNationUtils {
    pagingBegin() {
        console.log("pagingBegin")
    }
}

const exportTest = function() {
    let return_data='';
    function exportInnerTest(data) {
        return_data = data+'inner function'
        console.log('export data =' ,return_data)
    }
    exportInnerTest('111')
    return {
        test_data : return_data
    }
}

export {exportTest, PageNationUtils}

 

module 로 분리한 기능 혹은 class를 외부에서 사용하기 위해서는 꼭 export 해주어야지 사용 가능 하다.  위에처럼 export 를 한번에 묶어서 해주어도 되고 , function 이나. class 앞에 export 로 선언해 주어도 된다 .

모듈 임포트후 사용

mport {exportTest,PageNationUtils} from '/assets/custom/js/PageNationJpaUtils.js';
const {exportTest,PageNationUtils} = require("/assets/custom/js/PageNationJpaUtils");


let pageNationUtils = new PageNationUtils();
pageNationUtils.pagingBegin()
console.log(exportTest())

--- 실행 log ---
pagingBegin
PageNationJpaUtils.js:11 export data = 111inner function
monthlyDownload:588 {test_data: '111inner function'}

• Node.js 에서 사용할때 require 사용 가능, 일반 웹에서 require 사용 불가능
• 일반 웹에서는 ES6 인 import 사용할것