<!-- index.html -->
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

// a.js
var result = "A 的结果";
 
// b.js
var result = "B 的结果";   // ← 覆盖了 a.js 的 result！
 
// c.js
console.log(result);        // 输出 "B 的结果"，不是 "A 的结果"

<script src="jquery.js"></script>
<script src="my-app.js"></script>
<!-- 所有 var 都挂 window 上，命名靠自觉 -->

// myModule.js
var MyModule = (function() {
    var privateVar = "别人看不到我";   // IIFE 内部 = 局部作用域
 
    return {
        publicMethod: function() {
            return privateVar;
        }
    };
})();

// math.js —— 导出
function add(a, b) { return a + b; }
function sub(a, b) { return a - b; }
 
module.exports = { add, sub };
// 或：exports.add = add; exports.sub = sub;

// main.js —— 导入
const math = require('./math');
 
console.log(math.add(2, 3));   // 5

// AMD 风格（RequireJS）
define(['jquery'], function($) {
    return {
        init: function() { $('#app').html('hi'); }
    };
});

// 引入
require(['myModule'], function(myModule) {
    myModule.init();
});

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);             // AMD
    } else if (typeof exports === 'object') {
        module.exports = factory();               // CommonJS
    } else {
        root.MyModule = factory();                // 全局
    }
}(typeof self !== 'undefined' ? self : this, function() {
    return { /* 真正实现 */ };
}));

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export const PI = 3.14;

// main.js
import { add, sub, PI } from './math.js';
 
console.log(add(2, 3));   // 5

// 1. 命名导出（Named Export）—— 一个文件可以有很多
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }
 
// 2. 集中导出（放在文件末尾）
const PI = 3.14;
function add(a, b) { return a + b; }
 
export { PI, add };
 
// 3. 默认导出（Default Export）—— 一个文件只能有一个
export default class UserService { /* ... */ }

// 1. 具名导入
import { add, PI } from './math.js';
 
// 2. 重命名（避免名字冲突）
import { add as addNumbers, PI as MathPI } from './math.js';
 
// 3. 默认导入
import UserService from './user-service.js';
 
// 4. 混合导入（默认 + 具名）
import UserService, { getUserById, deleteUser } from './user-service.js';
 
// 5. 命名空间导入（把整个模块当一个对象）
import * as math from './math.js';
console.log(math.add(2, 3));
console.log(math.PI);
 
// 6. 仅副作用导入（只想跑模块的顶层代码）
import './polyfill.js';
 
// 7. 动态导入（ES2020，运行时按需加载）
const math = await import('./math.js');

import x from './math.js';          // 相对路径，必须带 .js 后缀
import x from '../utils/math.js';   // 相对路径的 ../
import x from '@/lib/math';         // 别名（webpack / Vite / TS 配置）
import React from 'react';          // bare specifier：从 node_modules 找
import lodash from 'lodash-es';     // bare specifier

// components/index.js —— 把所有组件汇总到一处
export { Button } from './Button.js';
export { Input } from './Input.js';
export { Select } from './Select.js';
 
// 用法
import { Button, Input, Select } from '@/components';

// 加载配置后才能导出
const config = await fetch('/api/config').then(r => r.json());
 
export const API_URL = config.apiUrl;
export const TIMEOUT = config.timeout;

<script type="module">
  import { add } from './math.js';
  console.log(add(2, 3));
</script>
 
<!-- 或者外部文件 -->
<script type="module" src="./app.js"></script>

// CommonJS —— require 是函数调用，可以动态拼
const moduleName = condition ? 'a' : 'b';
const mod = require(`./${moduleName}`);   // 运行时才知道加载什么
 
// ESM —— import 是语法，路径必须静态可分析
import x from './a.js';                   // 必须是字符串字面量
// import(`${name}.js`);                  ← 这就是动态 import()，是单独的 API

// counter.js (CommonJS)
let count = 0;
function increment() { count++; }
module.exports = { count, increment };
 
// main.js
const { count, increment } = require('./counter');
console.log(count);      // 0
increment();
console.log(count);      // 还是 0！导出的 count 是「值拷贝」

// counter.js (ESM)
export let count = 0;
export function increment() { count++; }
 
// main.js
import { count, increment } from './counter.js';
console.log(count);      // 0
increment();
console.log(count);      // 1！count 是「活绑定」，原始值变了导入处也看到

// a.js (CommonJS)
const b = require('./b');
module.exports = { name: 'a', bName: b.name };   // b 是部分导出
 
// b.js (CommonJS)
const a = require('./a');
module.exports = { name: 'b', aName: a.name };   // a.name 是 undefined（a 还没导出完）

// utils.js
export function used() { return '我被用了'; }
export function unused() { return '我没人用'; }
export function alsoUnused() { return '我也没人用'; }

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

// math.js —— 有副作用！
export function add(a, b) { return a + b; }
console.log('math 模块被加载了');   // ← 顶层代码，打包器不知道这个 console 是不是「重要的副作用」
window.MATH_LOADED = true;        // ← 同样，打包器不敢删

{
  "name": "my-lib",
  "sideEffects": false
}

import x from './math.js';          // 1. 相对路径
import x from '../utils/math.js';   //    （相对当前文件）
import x from '@/lib/math';         //    （@/ 是配置的别名）
 
import x from 'react';              // 2. bare specifier
import x from 'lodash-es';          //    （从 node_modules 找）
import x from '@types/node';        //    （scope package）
 
import x from 'fs';                 // 3. Node 内置模块
import x from 'node:fs';            //    （加 node: 前缀是现代推荐写法）

{
  "name": "react",
  "version": "18.0.0",
  "main": "index.js",                          // CommonJS 入口
  "module": "dist/index.mjs",                  // ESM 入口（打包器优先用）
  "exports": {                                  // 现代入口（推荐）
    ".": {
      "import": "./dist/index.mjs",            // ESM 用这个
      "require": "./dist/index.cjs",           // CommonJS 用这个
      "default": "./dist/index.mjs"
    }
  },
  "sideEffects": false                          // Tree Shaking 友好
}

my-app/
├── src/
│   ├── components/          # UI 组件（默认导出为主）
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   └── index.ts     # 出口：export { Button } from './Button'
│   │   ├── Input/
│   │   └── index.ts         # barrel：汇总所有组件
│   ├── lib/                 # 工具库（命名导出为主）
│   │   ├── date.ts
│   │   ├── string.ts
│   │   └── index.ts
│   ├── api/                 # API 调用
│   │   ├── user.ts
│   │   └── post.ts
│   ├── types/               # 类型定义
│   │   └── index.ts
│   └── app.tsx              # 入口
├── package.json             # "type": "module"
└── tsconfig.json            # 配置 @/ 别名

// 默认导入组件
import { Button } from '@/components/Button';
import { Input } from '@/components/Input';
 
// 命名导入工具
import { formatDate, parseDate } from '@/lib/date';
import { truncate } from '@/lib/string';
 
// 命名空间导入
import * as UserAPI from '@/api/user';

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}