Skip to content
Search

JavaScript Module System

lastmod 2022-04-08created 2022-04-0719 edits

Same as the JavaScript:Module/JavaScript:Import pages.

A pile of developers' clumsy attempts to add a module system to JavaScript

Quick differences

Usage and differences of each spec:

==

<script>

type module == 

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

Declaring type="module" on a script tag makes the JavaScript file behave as a module. Using the mjs extension is recommended so that it is clear the file is a module.

  • On the assumption that few browsers implement it yet, bundlers like webpack are used,
  • but on the assumption that most browsers implement it, there are also tools like vite that cut bundling time.

If you use webpack, see Webpack#Modules.

Defining 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() {}

Importing modules (import)

Syntax: 

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 ↩

author Zer0 sitemap