[Javascript] 자바스크립트 모듈 로더

    - javascript module loader

< 모듈 포맷 >

* AMD (Asynchronous Module Definition)
    -  브라우저에서 사용되고 define 함수를 사용해서 모듈을 정의
    - Require.JS 에 의해서 구현됨

requirejs/requirejs

https://github.com/requirejs/requirejs -12,268

    - v2.3.6 , 2018/08

    - 예제)
https://objectcomputing.com/resources/publications/sett/august-2015-modularizing-javascript-with-requirejs
// s1.js
    define(function() {
        console.log("s1");
        return { text: 'test' };
    });

// s2.js:
    require(['s1'], function(s1) {
        console.log("s2");
        document.body.appendChild(document.createTextNode(s1.text));
    });

// index.html:     

<script data-main="s2.js" src="require.js"></script>

//=============================
* CommonJS 
    - Node.js에서 사용되고 require와 module.exports를 사용해서 의존성과 모듈을 정의한다. 

// double-number.js
module.exports = function(number) {
  return number * 2;
}

//index.js
var doubleNumber = require("./double-number");
console.log(doubleNumber(4)); // 8




//=============================
* UMD (Universal Module Definition)
    - 브라우저와 Node.js에서 둘 다 사용
https://github.com/umdjs/umd - 6,076

//mod1.js
(function (root, factory) {
    if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = factory();
        console.log('mod1-1');
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
        console.log('mod1-2');
    } else {
        // Browser globals
        root.mod1 = factory();
        console.log('mod1-3');
    }
}(this, function factory() {
    console.log('mod1-4');
    // public API
    return {
        foo: 'bar'
    };
}));


//index.htm

<script src="mod1.js"></script>
    
    <script>
        (function (root, factory) {
            if (typeof module === 'object' && module.exports) {
                // Node/CommonJS
                factory(
                    require('./mod1.js')
                );
                console.log(1);
            } else if (typeof define === 'function' && define.amd) {
                // AMD
                define([
                    './mod1.js'
                ], factory);
                console.log(2);
            } else {
                // Browser globals
                factory(root.mod1);
                console.log(3, root.mod1);
            }
        }(this, function factory(mod1) {
            // Tests here
            console.log(4, mod1);
        }));
    </script>

//============================
* ES6 (ECMAScript 2015) 모듈

    - 자바스크립트 표준 모듈

    - 2017년 부터는 모든 브라우저에서 지원하기 시작

//lib.js
export const pi = Math.PI;


//app.js
import * as lib from './lib.js';
console.log(lib.pi);         // 3.141592653589793

// *.htm

<script type="module" src="app.js"></script>

//=============================
* System.register
    - SystemJS의 모듈 포맷
https://github.com/systemjs/systemjs/blob/master/docs/system-register.md




//===============================================================
//===============================================================
< 모듈 로더 (Module Loader) >
    - 런타임에 실행
https://trends.google.com/trends/explore?cat=31&date=today%205-y&q=RequireJS,SystemJS


//=============================
* RequireJS
    - AMD 포맷 모듈을 위한 로더
https://requirejs.org/
https://github.com/requirejs/requirejs - 12.260
    - v2.3.6 , 2018/08




//=============================
* SystemJS
    -  AMD, CommonJS, UMD 또는 System.register 포맷 모듈을 위한 로더
https://github.com/systemjs/systemjs - 9,732
    - v4.1.0 , 2019/07


    - System.register
        - SystemJS의 모듈 포맷
https://github.com/systemjs/systemjs/blob/master/docs/system-register.md


//===============
* System.register 모듈 포맷 로드

<script src="system.js"></script>
<script>
  System.import('/js/main.js'); // main.js = System.register 모듈 포맷 로드
</script>

//===========
* ES 모듈로드
    -  브라우저에서 지원하지 않는다면 Babel 플러그인 필요
https://github.com/systemjs/systemjs-transform-babel

<script src="system.js"></script>
<script src="extras/transform.js"></script>
<script src="plugin-babel/dist/babel-transform.js"></script>
<script>
  // main and all its dependencies will now run through transform before loading
  System.import('/js/main.js');
</script>

 

//=================================================
// 참고

RequireJS - AMD의 이해와 개발
https://d2.naver.com/helloworld/591319

AMD, CommonJS, UMD 모듈
https://www.zerocho.com/category/JavaScript/post/5b67e7847bbbd3001b43fd73


https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b


자바스크립트 모듈, 모듈 포맷, 모듈 로더와 모듈 번들러에 대한 10분 입문서
https://github.com/codepink/codepink.github.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88,-%EB%AA%A8%EB%93%88-%ED%8F%AC%EB%A7%B7,-%EB%AA%A8%EB%93%88-%EB%A1%9C%EB%8D%94%EC%99%80-%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%9F%AC%EC%97%90-%EB%8C%80%ED%95%9C-10%EB%B6%84-%EC%9E%85%EB%AC%B8%EC%84%9C