[2024-03-02-javascript-module-system] Example code snippet

01_cjs_syntax.js

// [출처] express (https://github.com/expressjs/express) 

/**
 * @description 모듈을 내보낼 때 
 * @see https://github.com/expressjs/express/blob/master/index.js#L11
 */

module.exports = require('./lib/express');

/**
 * @description 모듈을 불러올 때 
 * @see https://github.com/expressjs/express/blob/master/lib/express.js#L15
 */

var bodyParser = require('body-parser')

02_cjs_scope.js

// module.js
exports.a = 'a';
exports.b = 'b';
exports.c = 'c';

// index.js
const cjsModule = require('./module');
cjsModule.a = 'z';
console.log(cjsModule); // {a: 'z', b: 'b', c: 'c'}

03_amd_syntax.js

// [출처] backbone (https://github.com/jashkenas/backbone) 

/**
 * @description 모듈을 내보낼 때 
 * @see https://github.com/jashkenas/backbone/blob/master/backbone.js#L16
 */

define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
  root.Backbone = factory(root, exports, _, $);
});

/**
 * @description 모듈을 불러올 때 
 * @see https://github.com/jashkenas/backbone/blob/master/backbone.js#L25
 */

var _ = require('underscore'), $;

04_esm_syntax.js

// [출처] react (https://github.com/facebook/react) 

/**
 * @description 모듈을 내보낼 때 
 * @see https://github.com/facebook/react/blob/main/packages/react/index.js#L31
 */

export {
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  act,
  Children,
  Component,
  // (...)
} from './src/ReactClient';

/**
 * @description 모듈을 불러올 때 
 * @see https://github.com/facebook/react/blob/main/packages/react/src/ReactClient.js#L25
 */

import {Component, PureComponent} from './ReactBaseClasses';

05_esm_scope.js

// module.js
export let a = 'a';
export let b = 'b';
export let c = 'c';

// index.js
import * as esmModule from './module.js';
esmModule.a = 'z';
console.log(esmModule);

/**
 * esmModule.a = 'z';
 *             ^
 * TypeError: Cannot assign to read only property 'a' of object '[object Module]'
 */

06_compatibility.js

// 1. ESM 환경에서 CJS 모듈을 불러올 때
import * as CJS from './cjs-module.js';

// 2. CJS 환경에서 ESM 모듈을 불러올 때
const ESM = require('./es-module');

07_default_export.js

// a.mjs 
export const a = 'a';
export default a;

// b.mjs 
import module1 from './a.js';
import * as module2 from './a.js';
console.log(module1); // 'a'
console.log(module2); // { default: 'a', a: 'a' }

// b.cjs
const module = require('/a');
console.log(module); // Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

08_redux_package.js

// [출처] redux (https://github.com/reduxjs/redux) 

/**
 * @see https://github.com/reduxjs/redux/blob/master/package.json#L29
 */

{
  // (...)
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./dist/redux.d.ts",
      "import": "./dist/redux.mjs",
      "default": "./dist/cjs/redux.cjs"
    }
  },
  // (...)
}