CommonJS 와 es6 에서의 모듈화

CommonJS 스펙 모듈화

모듈화를 하는 방법은 두가지이다.

개별로 모듈화를 하는 방법은 exports.변수명이며,

전체를 모듈화를 하는 방법은 module.exports 이다.

개별로 모듈화

exports.area = function(r) {
  return Math.PI * r * r;
};

exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

exports.area = function(r) {

return Math.PI * r * r;

};

exports.circumference = function (r) {

return 2 * Math.PI * r;

};

전체 모듈화

module.exports = {
  bulk: function (x) {
    return x * x * x;
  }
};

module.exports = {

bulk: function (x) {

return x * x * x;

}

};

모듈을 불러와서 사용하기

var circle = require('./circle');
var cube = require('./cube');

console.log(circle.area(10));
console.log(circle.circumference(10));

console.log(cube.bulk(10));

var circle = require('./circle');

var cube = require('./cube');

console.log(circle.area(10));

console.log(circle.circumference(10));

console.log(cube.bulk(10));

require(‘circle) 은 먼저 circle.js를 찾고 circle이 없다면 현재폴더에 circle 폴더를 찾고 그 폴더안에 index.js를 찾는다.

이게 CommonJS 스펙이다.

es6 모듈화

es6에서는 export 하는 방법은 두가지가 있다.

하나는 이름을 명시하는 named exports 방법과 default exports 방법이다.

named exports

// named exports : 여러개 사용 가능
export var area = function(r) {
  return Math.PI * r * r;
};

export var circumference = function (r) {
  return 2 * Math.PI * r;
};

// named exports : 여러개 사용 가능

export var area = function(r) {

return Math.PI * r * r;

};

export var circumference = function (r) {

return 2 * Math.PI * r;

};

default exports

// default exports: 화일에 단 한개
export default {
  bulk: function (r) {
    return r* r * r;
  }
}

// default exports: 화일에 단 한개

export default {

bulk: function (r) {

return r* r * r;

}

불러와서 사용하기

import {area, circumference} from "./circle";
import cube from './cube';

console.log(area(5));
console.log(circumference(5));

console.log(cube.bulk(5));

import {area, circumference} from "./circle";

import cube from './cube';

console.log(area(5));

console.log(circumference(5));

console.log(cube.bulk(5));

named exports를 import 하는 경우는 {] 사용하고 동일한 이름으로 import 해야 한다.

default exports를 import하는 경우는 {} 없이 사용 가능하고 또한 이름을 바꿀수도 있다.

CommonJS 스펙 모듈화

es6 모듈화

– quiz