Skip to content

JavaScript Module System

JavaScript:Module/JavaScript:Import 항목과 동일.

JavaScript에 모듈 시스템(Module System)을 추가하기 위한 개발자들의 뻘짓 집합체

간단한 차이점

각각의 스팩별 사용 방법 및 차이점:

==

<script>

type module == 

<script type="module" src="index.mjs">

script 태그에 type="module"을 선언하면 자바스크립트 파일은 모듈로 동작합니다. 이때 모듈이라는 것을 명확히 알기 위해서 mjs 확장자를 사용하도록 권장합니다.

  • 아직 구현된 브라우저가 많이 않다는 전제로 webpack같은 번들러를 사용하지만,
  • 다수의 브라우저가 구현되어있다는 전제로 번들링 시간을 단축한 vite 같은 도구도 있다.

webpack을 사용한다면 Webpack#Modules 항목 참조.

모듈 정의하기 (export)

ES6 

// 모듈 전체를 export, 파일내 한번만 사용가능하다.
var module = {};
export default module

// 모든 속성을 export
export *;

// 함수를 직접 export
export function moduleFunc() {};
var property = "some property";
export {property};

CommonJS 

// 모듈 전체를 export
module.exports = module

// 모든 속성을 export
// (아시는 분 알려주세요)

// 함수를 직접 export
exports.moduleFunc = function() {}

모듈 가져오기 (import)

구문: 

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

ES6 

// 모듈 전체를 import
import module
import module as myModule

// 모든 속성 import
import * from module

// 특정 멤버(함수 등)만 import
import {moduleFunc, moduleFunc2} from module

CommonJS 

// 모듈 전체를 import
var module = require('./someModule.js')

// 모든 속성 import
// (위의 module 객체에 모든 속성이 담아져 온다.)

// 특정 멤버(함수 등)만 import, 위의 module을 이용한다.
module.moduleFunc

UMD 

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['exports', 'b'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('b'));
  } else {
    // Browser globals
    factory((root.commonJsStrict = {}), root.b);
  }
}(this, function (exports, b) {
  //use b in some fashion.

  // attach properties to the exports object to define
  // the exported module properties.
  exports.action = function () {};
}));

See also

Favorite site

References

  1. Javascript_-require_vs_import-CommonJS_and_ES6-_bono_blog.pdf ↩