Day 2 - 開發環境建置：monorepo

1
/**
2
 * 打包「開發環境」使用的腳本
3
 *
4
 * 用法示例：
5
 *   node scripts/dev.js --format esm
6
 *   node scripts/dev.js -f cjs reactive
7
 *
8
 * - 位置參數（第一個）用來指定要打包的子套件名稱（對應 packages/<name>）
9
 * - --format / -f 指定輸出格式：esm | cjs | iife（預設 esm）
10
 */
11

12
import { parseArgs } from 'node:util'
13
import { resolve, dirname } from 'node:path'
14
import { fileURLToPath } from 'node:url'
92 collapsed lines
15
import esbuild from 'esbuild'
16
import { createRequire } from 'node:module'
17

18
/**
19
 * 解析命令列參數
20
 * allowPositionals: 允許使用位置參數（例如 reactive）
21
 * options.format: 支援 --format 或 -f，型別為字串，預設 'esm'
22
 */
23
const {
24
  values: { format },
25
  positionals,
26
} = parseArgs({
27
  allowPositionals: true,
28
  options: {
29
    format: {
30
      type: 'string',
31
      short: 'f',
32
      default: 'esm',
33
    },
34
  },
35
})
36

37
/**
38
 * 在 ESM 模式下建立 __filename / __dirname
39
 * - ESM 沒有這兩個全域變數，因此透過 import.meta.url 轉換得到
40
 */
41
const __filename = fileURLToPath(import.meta.url)
42
const __dirname = dirname(__filename)
43

44
/**
45
 * 在 ESM 中建立一個 require()
46
 * - 用來載入 CJS 風格資源（例如 JSON）
47
 */
48
const require = createRequire(import.meta.url)
49

50
/**
51
 * 解析要打包的 target
52
 * - 若有提供位置參數，取第一個；否則預設打包 packages/vue
53
 */
54
const target = positionals.length ? positionals[0] : 'vue'
55

56
/**
57
 * 入口檔案（固定指向 packages/<target>/src/index.ts）
58
 */
59
const entry = resolve(__dirname, `../packages/${target}/src/index.ts`)
60

61
/**
62
 * 決定輸出檔路徑
63
 * - 命名慣例：<target>.<format>.js
64
 *   例：reactive.cjs.js / reactive.esm.js
65
 */
66
const outfile = resolve(__dirname, `../packages/${target}/dist/${target}.${format}.js`)
67

68
/**
69
 * 讀取目標子套件的 package.json
70
 * - 常見做法是從中讀 buildOptions.name，作為 IIFE/UMD 的全域變數名
71
 * - 若 package.json 沒有 buildOptions，請自行調整
72
 */
73
const pkg = require(`../packages/${target}/package.json`)
74

75
/**
76
 * 建立 esbuild 編譯 context 並進入 watch 模式
77
 * - entryPoints: 打包入口
78
 * - outfile: 打包輸出檔案
79
 * - format: 'esm' | 'cjs' | 'iife'
80
 * - platform: esbuild 的目標平台（'node' | 'browser'）
81
 *   * 這裡示範：如果是 cjs，就傾向 node；否則視為 browser
82
 * - sourcemap: 方便除錯
83
 * - bundle: 把相依打進去（單檔輸出）
84
 * - globalName: IIFE/UMD 下掛在 window 的全域名稱（esm/cjs 不會用到）
85
 */
86
esbuild
87
  .context({
88
    entryPoints: [entry],                          // 入口檔
89
    outfile,                                       // 輸出檔
90
    format,                                        // 輸出格式：esm | cjs | iife
91
    platform: format === 'cjs' ? 'node' : 'browser',// 目標平台：node 或 browser
92
    sourcemap: true,                               // 產生 source map
93
    bundle: true,                                  // 打包成單檔
94
    globalName: pkg.buildOptions?.name,            // IIFE/UMD 會用到；esm/cjs 可忽略
95
  })
96
  .then(async (ctx) => {
97
    // 啟用 watch：監聽檔案變更並自動重建
98
    await ctx.watch()
99
    console.log(
100
      `[esbuild] watching "${target}" in ${format} mode → ${outfile}`
101
    )
102
  })
103
  .catch((err) => {
104
    console.error('[esbuild] build context error:', err)
105
    process.exit(1)
106
  })

1
function fn(a, b) {
2
  return a + b;
3
}
4
export {
5
  fn
6
};