Module 개념
2020. 7. 7. 13:33ㆍ웹/Webpack
정의
-
프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태, 어떤 기준을 통해 코드가 분리되어 있는 상황에서 서로를 참조
-
재사용성과 프로그램 관리 차원의 장점
Module 표준
-
Module 시스템이 제공되는 환경은 파일을 하나의 모듈로 인식하고 자신의 코드를 외부에서 참조할 수 있게 하거나 다른 Module 로 부터 특정 기능을 사용할 수 있게 해주는 keyword를 제공할 수 있는 환경
-
Module 을 사용하는 방법은 Module 이 어떤 표준을 따르냐에 따라 달라짐
Module 시스템은 여러가지 존재
-
CommonJS(Node.js)
-
ESM(ECMAScript 2015 ~)
1. CommonJS(Node.js)
Module Keyword: 가져오기
require (모듈의 경로)
Module keyowrd: 내보내기
module.exports
예제)
-- index.js --
const { getCircleArea } = require('./mathUtil');
const result = getCircleArea(2);
console.log(result);
-- mathUtil.js --
const PI = 3.14;
const getCircleArea = r => r * r * PI;
module.exports = {
PI,
getCircleArea
}
-- 명령어 실행 --
node index.js
-- 출력 결과 --
12.56
2. ESM(ES6 이후 표준모듈시스템)
Module Keyword: 가져오기
import 모듈_이름 from 모듈_위치
Module keyowrd: 내보내기
export
export defualt
모듈 설치 및 파일 실행
-
NodeJs 환경에서 ESM 으로 모듈을 사용하기 위해 외부 모듈 필요
-
NodeJs 는 기본적으로 CommonJs를 따르기 때문에, 다른 방식의 접근할 수 있는 도구 필요
npm install esm
// -r 옵션 : 노드 명령어를 실행할때, 실행하는 파일의 표준 중에(CommonJs) 다른 모듈의 표준도 해석할 수 있게 해주는 옵션
node -r esm index.js
예제)
-- index.js --
import { getCircleArea } from './mathUtil';
const reulst = getCircleArea(2);
console.log(result);
-- mathUtil.js --
const PI = 3.14;
const getCircleArea = r => r * r * PI;
export {
PI,
getCircleArea
}
-- 명령어 실행 --
node -r esm index.js
-- 실행결과 --
12.56
'웹 > Webpack' 카테고리의 다른 글
Loader (0) | 2020.07.09 |
---|---|
Webpack - 기본 환경 (0) | 2020.07.07 |
Webpack 개념 (0) | 2020.07.07 |