Modules, bundler và runtime hiện đại

// math.js — gắn vào window/global
var Math2 = (function() {
  function add(a, b) { return a + b; }
  function sub(a, b) { return a - b; }
  return { add: add, sub: sub };   // expose public
})();

// dùng:
Math2.add(1, 2);  // 3

// math.js
function add(a, b) { return a + b; }
module.exports = { add: add };

// main.js
const math = require('./math');
math.add(1, 2);

// math.js
export function add(a, b) { return a + b; }

// main.js
import { add } from './math.js';
add(1, 2);

// utils.js — nhiều cách export
module.exports = { foo, bar };           // object export
module.exports.baz = function() {};       // gán dần
exports.qux = 1;                       // shorthand (cẩn thận: không reassign exports trực tiếp)

// main.js
const utils = require('./utils');          // .js extension optional
const { foo } = require('./utils');        // destructure
const express = require('express');         // package từ node_modules

// Dynamic require — chạy ở mọi nơi
if (process.env.NODE_ENV === 'development') {
  const devTool = require('./dev-only');
}

for (const name of pluginNames) {
  const plugin = require(`./plugins/${name}`);
}

// math.js — export nhiều cách
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }

// Hoặc gom cuối file:
function sub(a, b) { return a - b; }
function mul(a, b) { return a * b; }
export { sub, mul };

// Default export — 1 cái/file
export default function multiply(a, b) { return a * b; }

// main.js — import
import { PI, add } from './math.js';        // named
import multiply from './math.js';             // default
import multiply, { PI, add } from './math.js'; // mix
import * as math from './math.js';            // namespace
import { PI as CIRCLE_PI } from './math.js';   // rename
import './side-effects.js';                  // chỉ chạy code, không import gì

<!-- index.html -->
<script type="module" src="main.js"></script>

// main.js
import { add } from './math.js';   // bắt buộc có .js
console.log(add(1, 2));

// Button.jsx
export default function Button() {}

// Mỗi file import có thể đặt tên khác nhau:
import Button from './Button';        // OK
import MyBtn from './Button';         // OK — tên tùy ý
import X from './Button';             // OK — đặt tên dở cũng được

// Khi grep "Button" trong project, có thể miss MyBtn/X

// utils/string.js
export function capitalize(s) { /* ... */ }
export function slugify(s) { /* ... */ }

// utils/number.js
export function clamp(n, min, max) { /* ... */ }

// utils/index.js — BARREL
export * from './string.js';          // re-export tất cả named
export * from './number.js';
export { capitalize as cap } from './string.js';  // chọn lọc + rename
export { default as Button } from './Button.jsx';  // re-export default

// main.js — gọn
import { capitalize, clamp } from './utils';
// thay vì:
// import { capitalize } from './utils/string';
// import { clamp } from './utils/number';

// Lazy load — chỉ load khi user click
button.addEventListener('click', async () => {
  const { default: Chart } = await import('./Chart.js');
  new Chart().render();
});

// Conditional load — A/B test
const theme = await import(
  user.experimental ? './theme-new.js' : './theme.js'
);

// Polyfill khi cần
if (!Array.prototype.at) {
  await import('./polyfills/array-at.js');
}

// Path từ variable
async function loadLocale(name) {
  return import(`./locales/${name}.js`);
}

// utils.js
export function used() { return 'A'; }
export function unused() { return 'B'; }

// main.js
import { used } from './utils.js';
console.log(used());

// Output bundle: chỉ chứa used(), unused() bị loại

// package.json
{
  "name": "my-lib",
  "sideEffects": false            // tất cả file đều "pure", an toàn cắt
}

// Hoặc whitelist file có side effect:
{
  "sideEffects": ["./src/polyfill.js", "*.css"]
}

src/
  index.tsx        // TypeScript + JSX
  App.tsx
  components/
    Button.tsx
    Form.tsx
  utils/
    api.ts
    format.ts
  styles/
    main.css

node_modules/
  react/           // CommonJS
  lodash-es/       // ESM
  ...300 packages

         ↓ Bundler

dist/
  index.html
  assets/
    main-a3f5.js          // entry chunk (minified)
    vendor-b1e8.js        // node_modules split
    Chart-c2d9.js         // lazy chunk
    main-a3f5.css
    main-a3f5.js.map      // source map cho debug

{
  "name": "my-lib",
  "version": "1.0.0",

  "type": "module",        // 🔑 mọi .js là ESM (Node 12+)

  "main": "./dist/cjs/index.cjs",    // CJS entry — Node cũ, tool cũ
  "module": "./dist/esm/index.js",   // ESM entry — bundler nhận diện (de-facto)
  "types": "./dist/index.d.ts",     // TypeScript definitions

  "exports": {                // 🔑 modern — conditional, Node 12.7+, ưu tiên hơn main/module
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.cjs",
      "default": "./dist/esm/index.js"
    },
    "./helpers": "./dist/helpers.js",
    "./package.json": "./package.json"
  },

  "sideEffects": false,    // tree-shake aggressive

  "files": ["dist"],       // chỉ publish folder dist lên npm

  "engines": { "node": ">=18" }
}

mkdir my-esm-app && cd my-esm-app
npm init -y
# mở package.json thêm "type": "module"

{
  "name": "my-esm-app",
  "version": "1.0.0",
  "type": "module",              // 🔑 dòng quan trọng nhất
  "scripts": { "start": "node index.js" }
}

export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

import { add, sub } from './math.js';   // 🔑 BẮT BUỘC có .js

console.log(add(1, 2));     // 3
console.log(sub(5, 3));     // 2

// __dirname không tồn tại — dùng import.meta.url
console.log(import.meta.url);

npm create vite@latest my-app
# Chọn: Vanilla → JavaScript (hoặc TypeScript)

cd my-app
npm install
npm run dev          # http://localhost:5173 — start < 1s
npm run build        # output vào dist/
npm run preview      # serve dist/ để test

my-app/
  index.html         // 🔑 entry — Vite tìm script type="module" trong đây
  package.json
  vite.config.js     // (optional) config bundler
  public/            // static assets — copy nguyên
  src/
    main.js
    style.css
    counter.js

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

import './style.css';                // CSS — Vite hiểu
import { setupCounter } from './counter.js';

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite</h1>
  <button id="cnt">Count</button>
`;

setupCounter(document.getElementById('cnt'));

// HMR API (Vite-specific)
if (import.meta.hot) {
  import.meta.hot.accept();
}