개별 모듈로 분할하기: CommonJS vs ECMAScript module

* 개별 모듈로 분할하기

ES2015 이후 개별 모듈로 분할하는 방법이 여러 가지 생겼다.

1) <script> 태그 사용하기

2) 직접 갖다 붙이기 (manual concatenation)

3) Makefile 기법

4) NodeJS 스타일의 require 구문 (CommonJS 모듈)

5) AMD 스타일의 define 콜백

6) 타입스크립트 자체 모듈 시스템

7) ECMASCript 모듈 ⭐️

 

* CommonJS 모듈 시스템: require & module.exports

https://nodejs.org/api/modules.html

javascript 자체가 지원하는 패키지 읽는 법

module.exports = foo; // 가능: var foo = require('foo');
exports.bar = bar; // 가능: var bar = require('foo').bar;

require로 부르고 module.exports={} 객체 안에 넣어서 내보낸다

ex 1.

// a.js
const b = require('./b');
console.log(b.name);

// b.js
const name = 'Module B';
module.exports = { name };

ex 2.

const Sequelize = require('sequelize');
const sequelize = new Sequelize({
  dialect: 'sqlite',
  db: './db.sqlite'
});

// table명, {속성}
const User = sequelize.define('User', {
  name: Sequelize.STRING // varchar 255 생성
});

module.exports = {Sequelize, sequelize, User};

 

* ECMAScript 모듈: ES2015 이후

ES2015(ES6) 사양으로 새로운 패키지 읽는 방법

프로젝트 종류에 따라 웹팩이나 ts-node 같은 도구가 필요한 경우도 있다.

webpack에서는 tree shaking으로 필요한 것만 가져올 수 있다(나머지 값들은 빌드에서 제거된다) -> 불필요한 파일 제거

 

require는 동적으로 모듈을 불러올 수 있지만, 불필요한 코드까지 불러온다.

babel-loader에서는 웹팩의 tree shaking 기능을 유지하기 위해 설정시 modules:false로 하면 된다

 

ex.

// a.ts
import * as b from './b';
console.log(b.name);

// b.ts
export const name = 'Module B';

 

source : 댄 밴더캄 저, <이펙티브 타입스크립트>, 장원호 옮김, 프로그래밍 인사이트

velog.io/@ehgks0000/import%EC%99%80-require%EC%9D%98-%EC%B0%A8%EC%9D%B4

medium.com/@shlee1353/webpack-%EC%9B%B9%ED%8C%A9-import-vs-require-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-17948f6c919e