方便你 Side Project 的工具箱

TL;DR

Side Project 開發提速三件套:dotenv(環境變數)、nodemon(自動重啟)、babel(支援新語法)。2026 年:nodemon 改用 tsx watch 或 bun --watch,babel 改用 Vite / Bun 內建。

主要參考

優化舊有專案(一):加入 dotenv, nodemon, babel 優化開發

經典三件套(2023 紀錄)

1. dotenv — 環境變數管理

npm install dotenv

// 入口檔頂端
require('dotenv').config();

// 之後就能讀
console.log(process.env.API_KEY);

# .env(別忘記加 .gitignore!)
API_KEY=xxx
DATABASE_URL=postgresql://...

.gitignore 必加

.env 裡通常有 secret,push 上去等於外洩。詳見 保護你的API KEY (React 前端)。

2026 年替代:

• Node 20.6+ 內建 --env-file:node --env-file=.env app.js(不用 dotenv)
• Bun 自動讀 .env,完全不用設定
• Deno 用 Deno.env + --allow-env

2. nodemon — 自動重啟

npm install -D nodemon

// package.json
{
  "scripts": {
    "dev": "nodemon src/index.js"
  }
}

檔案改動就自動重啟,不用手動 ctrl+C / npm start。

2026 年替代:

• tsx watch app.ts(TypeScript 友善,比 nodemon + ts-node 快很多)
• bun --watch run app.ts(Bun 內建)
• node --watch app.js(Node 18+ 內建!)

# Node 18+ 原生
node --watch src/index.js

# tsx(現代 TS-friendly)
npx tsx watch src/index.ts

3. Babel — 新語法 transpile

npm install -D @babel/core @babel/node @babel/preset-env

為了在 Node.js 用 ES Module 語法(import / export)。

2026 年替代:

• Node.js 22+ 原生支援 ESM + TypeScript(experimental):直接 node app.ts 跑
• Bun / Deno 直接吃 TS,無 transpile
• Vite / esbuild 處理打包,babel 已不需要

大部分新專案不用 babel,只有需要 支援很舊瀏覽器 才需要。

其他推薦工具(2026)

一個現代 Side Project 推薦 Stack

Frontend:  Next.js 15 (App Router) + Tailwind + shadcn/ui
Backend:   Next.js API Routes 或 Hono + Cloudflare Workers
DB:        Supabase (Postgres + Auth + Storage)
DX:        Bun(runtime + package + test)+ Biome(lint+format)
Deploy:    Vercel / Cloudflare Pages
Tracking:  Sentry / PostHog
Email:     Resend
Analytics: Vercel Analytics / Umami

Bobo 個人 stack 偏這個方向。詳見 Recharge 整個現代前端評估清單。

Git pre-commit hook(防 secret 外洩)

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

# .husky/pre-commit
npx lint-staged

每次 commit 自動跑 lint + format,垃圾 code 進不了 git。

環境分離

.env                # 共用
.env.local          # 本機 override(.gitignore)
.env.development    # 開發
.env.production     # production
.env.test           # 測試

Next.js / Vite 自動讀對應檔案,不用自己處理。