ابزارها و اکوسیستم

ابزارهای توسعه

اکوسیستم جاوا اسکریپت ابزارهای قدرتمندی دارد:

Browser DevTools

// F12 — پنل‌های مهم:
// Elements   — DOM و CSS زنده
// Console    — اجرای JS و لاگ
// Sources    — دیباگ با Breakpoint
// Network    — درخواست‌ها
// Performance — پروفایل کارایی
// Memory     — نشتی حافظه
// Application — Storage و Cookie

// Console APIهای مفید:
console.log("عادی");
console.warn("هشدار");
console.error("خطا");
console.table([{a:1}, {a:2}]);  // جدول
console.group("گروه");
console.log("داخل گروه");
console.groupEnd();
console.time("نام");
// ... عملیات
console.timeEnd("نام");  // مدت

// $0 — آخرین المنت انتخاب‌شده در Elements:
console.log($0.tagName);

// $ — کوچک‌ترین jQuery:
console.log($(".my-class"));

npm — مدیریت پکیج

// راه‌اندازی پروژه:
// npm init -y

// نصب:
// npm install lodash          — تولیدی
// npm install -D jest         — توسعه (devDependencies)
// npm install -g typescript   — سراسری

// نسخه خاص:
// npm install lodash@4.17.21
// npm install lodash@^4.17.0  — سازگار patch/minor
// npm install lodash@latest

// حذف:
// npm uninstall lodash

// به‌روزرسانی:
// npm update
// npm outdated               — قدیمی‌ها

// اجرای اسکریپت:
// npm run dev
// npm test

// audit امنیتی:
// npm audit

package.json — قلب پروژه

{
    "name": "my-app",
    "version": "1.2.3",
    "description": "توضیح پروژه",
    "main": "index.js",
    "type": "module",           // ESM فعال
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "test": "jest",
        "lint": "eslint .",
        "format": "prettier --write ."
    },
    "dependencies": {
        "lodash": "^4.17.21",   — اجرای تولیدی
        "axios": "^1.6.0"
    },
    "devDependencies": {
        "jest": "^29.0.0",      — فقط توسعه
        "eslint": "^8.0.0"
    },
    "engines": {
        "node": ">=18.0.0"     — حداقل نسخه
    }
}

package-lock.json — قفل نسخه‌ها

// نصب‌های دقیق و کامل — قابل بازتولید:
{
    "name": "my-app",
    "lockfileVersion": 3,
    "packages": {
        "node_modules/lodash": {
            "version": "4.17.21",  — دقیق همین!
            "resolved": "https://registry.npmjs.org/..."
        }
    }
}

// ✓ همیشه commit کنید!
// ✓ همه توسعه‌دهندگان همان نسخه‌ها
// ✓ npm ci — نصب از lock (سریع‌تر و مطمئن)

Semantic Versioning — SemVer

// MAJOR.MINOR.PATCH
// 1.4.2
// │ │ └── PATCH — رفع باگ (سازگار)
// │ └──── MINOR — قابلیت جدید (سازگار)
// └────── MAJOR — تغییر شکستن (نا‌سازگار!)

// نمادها در dependencies:
"lodash": "4.17.21"   — دقیق همین
"lodash": "^4.17.21"  — 4.x.x (>=4.17.21 <5.0.0)
"lodash": "~4.17.21"  — 4.17.x فقط patch
"lodash": ">=4.0.0"   — حداقل
"lodash": "*"         — هر نسخه (خطرناک!)

// مثال MAJOR شکستن:
// lodash 3 → 4: _.pluck حذف شد!

npm Scripts — اتوماسیون

// scripts در package.json:
{
    "scripts": {
        // pre و post — خودکار قبل و بعد:
        "prebuild": "npm test",
        "build": "vite build",
        "postbuild": "echo تمام شد",

        // ترکیب با &&:
        "lint:fix": "eslint . --fix && prettier --write .",

        // متغیر محیطی:
        "start:prod": "NODE_ENV=production node server.js",

        // watch:
        "watch": "jest --watch"
    }
}

// اجرا:
// npm run build       — هر اسکریپت دلخواه
// npm start           — میانبر start
// npm test            — میانبر test

// ارسال آرگومان:
// npm run test -- --coverage

Bundler — تجمیع‌کننده

ماژول‌های متعدد → فایل‌های بهینه:

// بدون bundler — ۵۰ درخواست HTTP: ❌
// <script src="a.js">
// <script src="b.js">
// ... ۴۸ دیگر

// با bundler — ۱-۳ فایل: ✓
// main.js → bundle.js (همه با هم، فشرده)

// Vite — مدرن و سریع:
// npm create vite@latest my-app
// dev سرور فوری + HMR
// build بهینه با Rollup

// Webpack — کلاسیک:
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

Tree Shaking — حذف کد بلااستفاده

// import کل کتابخانه: ❌
// import _ from "lodash";  — ۷۰KB کامل!

// import فقط چیز لازم: ✓
// import { debounce } from "lodash-es";  — فقط debounce!

// برای فعال بودن:
// - ES Modules (import/export)
// - "sideEffects": false در package.json
// - mode: "production"

Babel — ترجمه‌گر

JS مدرن → JS قابل اجرا در مرورگرهای قدیمی:

// ورودی — ES2022:
class App {
    #count = 0;
    increment() { return ++this.#count; }
}

// خروجی — ES5 (توسط Babel):
function App() {
    this._count = 0;  // تبدیل فیلد خصوصی
}
App.prototype.increment = function () {
    return ++this._count;
};

// پیکربندی — babel.config.json:
{
    "presets": [
        ["@babel/preset-env", {
            "targets": { "browsers": ["> 1%"] }
        }]
    ]
}

Source Maps — نقشه کد

// کد production فشرده و ناخوانا:
// bundle.js → "function a(){return!0}..." 

// Source Map — اتصال به سورس اصلی:
//# sourceMappingURL=bundle.js.map

// در DevTools → خطای واقعی در فایل اصلی:
// Error at src/utils.js:42 به‌جای bundle.js:1:234

// webpack.config.js:
module.exports = {
    devtool: "source-map",  — کامل (production)
    // devtool: "eval"       — سریع (dev)
};

Environment Variables

// در Vite — پیشوند VITE_:
// .env:
// VITE_API_URL=https://api.example.com
// VITE_API_KEY=abc123

// .env.development:
// VITE_API_URL=http://localhost:3000

// استفاده:
const apiUrl = import.meta.env.VITE_API_URL;
// حتماً در .gitignore:
// .env*

ابزارهای خط فرمان

// Node REPL:
// node — محیط تعاملی

// اجرای فایل:
// node script.js

// npx — اجرای پکیج بدون نصب:
// npx create-react-app my-app
// npx cowsay "سلام"

// nodemon — اجرای مجدد خودکار:
// npm install -g nodemon
// nodemon server.js

// concurrently — چند دستور موازی:
// "dev": "concurrently "npm:server" "npm:client""

جمع‌بندی — ابزارهای ضروری