[JavaScript] Module

• 모듈(Module)
  • 소스 코드를 작으면서 유지보수 하기 편하고 재사용성과 개발 효율성 극대화하는 조각으로 나누는 것
• Module System의 종류
  • CommonJS, AMD, UMD, ESM, CJS, AMD, RequireJS
    • ESM이 현재 표준
    • NodeJS에서는 CJS가 default
    • NodeJS에서 ESM 사용 방법
      1. package.json에 “type”: “module”, 추가
      2. 모든 file 확장자를 mjs로
      3. inline node 실행 시
         1. $> node --input-type=module --eval "import { sep } from 'path'; console.log(sep);"
         2. $> echo "import { sep } from 'path'; console.log(sep);" | node --input-type=module
      4. v13 이전 --experimental-modules 옵션 추가
         1. --experimental-specifier-resolution=node) ← 이름 생략
      5. npm i esm ⇒ $> node -r esm mod.js
• Module 소개
  • Module의 의미
    • 재사용 가능한 파일 단위의 코드 조각으로 나누는 것
    • 자신만의 module scope를 갖으며 애플리케이션과 독립적으로 자체 컴파일 단위
    • 코드의 변수, 상수, 함수, 클래스 등을 선택적으로 공개(export)
    • 이름 충돌과 종속성 문제 해결 및 자동 strict mode
    • read-only로 로드되며 동일 영역 중복 import 가능
    • 형식(브라우저): <script type="module" src="./mod.js"></script>
  • import & export
    • 특정 모듈에서 export한 것을 import
    • module을 찾을 위치를 문자열로 지정하는 모듈 지정자(module specifier) 사용
    • 중복 import 하더라고 영역(실행컨텍스트 단위) 당 한번만 로드
    • 여러 다른 모듈에서 import 하더라도 동일한 복사본 로드
    • import, export 선언은 최상위 스코프에서만 가능
    • 표현식이 아니라 선언이므로 hoisting
• export
  • CJS (default)
    • module.exports = function() {…}
  • ESM
    • export function fn() {…}
    • export const PI = Math.PI;
    • export class User {…}
    • export default function(i) {…}
    • export {fn, PI, version as ver};
    • export {User};
• import in file
  • const mod = require(’./mod.js’);
  • import {PI, fn, ver, User} from ‘./mod.js’;
  • import * as mod from ‘./mod.js’;
  • import ‘./mod.js’;
• 간접 export (indirect export & aggregating)
  • export {xxx} from ‘.mod1.js’;
    • mod1에서 xxx를 import 동시에 export
  • export * from ‘./mod1.js’;

• ESM을 써야하는 이유(nodejs)
  • require시에 destructuring(구조 해제)가 된다. → module의 변수 값을 변경할 수 있다. (보안 취약)
• tree-shaking & bundling
  • Tree shaking (ESM)
    • 죽은 코드 제거의 한 형태 (사용하지 않는 코드 제거)
    • 정적(구문) 분석을 통해 대상 선별 가능
      • 대상: 최상위 코드, 함수 내부와 동적 import에서 사용되지 않는 코드
  • Bundling : Babel + Webpack/Rollup
    • Bundling
      • 여러 개로 흩어져 있는 파일들을 하나의 파일로 모아주는 역할
    • Babel
      • JS의 컴파일러이며, 최신 버전의 JS가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다.
        • $> npm i -D @babel/core @babel/cli @babel/preset-env
        • $> npm i @babel/polyfill
    • Webpack
      • 모듈 번들러라고 하며, 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript, Image 등을 각각의 모듈로 보고 이를 조합해서 하나의 결과물로 만드는 도구
        • $> npm i -D webpack webpack-cli babel-loader