ES 모듈 시스템

ECMAScript modules are the official standard format to package JavaScript code for reuse.
ES 모듈은 자바스크립트 코드를 재사용하기 위한 공식적인 표준 형식입니다.

Node.js - ECMAScript modules

0. 모듈 만드는 방법

.mjs 확장자 사용

.mjs 확장자를 가진 파일은 ES 모듈로 인식된다.

package.js 작성

{
  "name": "my-project",
  "version": "1.0.0",
  "타입": "모듈이름"
}

--input-type 플래그 사용

// 모듈이름.js
export const message = "안녕, ES module이야!";

node --input-type module 모듈이름.js 명령줄에서 실행하면
모듈이름.js 파일이 ES 모듈로 인식된다.

반대로 CJS(CommonJS)로 인식시키고 싶으면,
node --input-type commonjs 모듈이름.js 라고 작성해준다.

+ 모든 .js 파일을 기본적으로 ES 모듈로 해석하도록 설정하기

node --experimental-default-type=module
지정되지 않은 모든 파일을 모듈로 인식하도록 설정

node --experimental-detect-module
node_modules/ 안의 파일 안에 ESM 구문이 포함되어 있으면 ESM으로 다루고, 그렇지 않으면 CJS으로 인식한다.
요즘은 커멘드 없이도 Determining module system으로 알아서 판단하는 모양?

---

1. export {...}

명시적으로 특정 변수나 함수를 내보내는 방법

export

// math.js
var pi = 3.14;
var sum = (a, b) => a + b;
// function sum(a,b){ return a+b; }

export { pi , sum };

여러 개의 이름이나 심볼을 한꺼번에 내보낼 수 있다.

import

// index.js
import {pi, sum} from "./math";

또는 import ~ as ~

as를 통해 불러왔을 때 변수명을 지정해 줄 수 있다.

import {pi, sum as importedSum} from "./math";

var sum = importedSum;

+. ES6 모듈 시스템에서 import 문으로 가져온 변수는 기본적으로 const로 선언되어 재할당이 불가능하다.

import {pi, sum as importedSum} from "./math";

importedSum = 3.141592; // 🙅‍

---

2. export default ...

모듈에서 기본적으로 내보내는 값을 지정하는 방법
모듈당 하나의 default 내보내기만 가능하다.

// module.js
let message = "hi";
var pi = 3.14;
const num = 1;

export { message, num };
export default pi; // 이곳에 pi 외의 변수를 추가할 수 없다.

// index.js
import pi, { message, num } from './module';
// default 로 export된 pi 변수

console.log(pi); // 3.14
console.log(message); // "hi"
console.log(num); // 1

---

// module.js
const other = 'something else';
const something = 'default value';

export default something;
export { other };

그렇다고 default export의 import를 강제하진 않는다.

// main.js
import { other } from './module';

---

3. 그러면 export default , 왜 쓰는데?

1. 유틸리티 함수, 리액트 컴포넌트 처럼 다양한 모듈에서 불러오는 일이 빈번할 때, import 할 때마다 중괄호를 쓰지 않아도 된다.

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
var multiply = (a, b) => a * b;
export { add, subtract, multiplex };

export default add; // 기본적으로 add 함수를 내보냄

2. 모듈을 가져오는 측에서 가장 중요한 값이 무엇인지 쉽게 식별가능하도록 한다.

// main.js
import add, { subtract, multiplex } from './math'; 

이 경우 더하는 함수(add)가 다른 나머지 함수들(subtrac, multiply)보다 중요하다는 것을 의미한다.

---

4. 라이브러리를 불러올때 import

npm으로 설치되어 package.js안에 작성된 라이브러리는 불러올 때 이름을 마음대로 정할 수 있다.

import lodashLibrary from "loadash";
console.log(lodashLibrary.VERSION);

단, {}안에 나열된 항목들은 패키지에서 제공하는 정확한 이름들을 사용해야한다.

import React, { useRef, useState } from 'react';

그렇다면 react 패키지의 모듈 구조가 다음과 같이 되어있다고 가정할 때,

export default React;
export { useRef, useState, ...등등 };

아래와 같이

import myReact, myRef, myState from 'react';

라고 하면 (내보내는 순서만 똑같으면) 될까?

.
.
.

정답은 x.

모듈에서 export default로 내보내는 "하나의 항목"에만
변수명을 지정해줄 수 있다.

그러나 여러개의 항목{}을 내보내는 모듈을 import 할 때
변수명을 지정해주고 싶다면?

다음과 같이 as 키워드를 사용하면 된다.

import React as MyReact, { useRef, useState as myState } from 'react';