Tooling — npm, Vite, ESLint, Prettier

পেশাদার JS পরিবেশ তিন কমান্ডে

~35 min Intermediate 8 practice problems Live runner

1. package.json

{
  "name": "abcl-app",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev":      "vite",
    "build":    "vite build",
    "preview":  "vite preview",
    "lint":     "eslint .",
    "format":   "prettier --write ."
  },
  "dependencies":   { "lodash-es": "^4.17.21" },
  "devDependencies": {
    "vite":     "^5.0.0",
    "eslint":   "^9.0.0",
    "prettier": "^3.0.0"
  }
}
প্রতিটি Node project-এর কেন্দ্রবিন্দু package.json — name, version, scripts, dependencies সব এখানে।

2. npm Commands & Semver

$ npm init -y                  # create package.json
$ npm install lodash-es        # add a runtime dep
$ npm install -D vite          # add a dev dep
$ npm uninstall lodash-es
$ npm run dev                  # run a script
$ npx vite                     # one-off binary

# semver in dependencies
"^4.17.21"   # any 4.x.x patch/minor (most common)
"~4.17.21"   # any 4.17.x patch only
"4.17.21"    # exact
Lockfiles Always commit package-lock.json. It pins exact versions so every collaborator and your CI install identical trees.

3. Vite — the Modern Dev Server

$ npm create vite@latest my-app -- --template vanilla
$ cd my-app
$ npm install
$ npm run dev                  # http://localhost:5173

  Vite is doing the modern trick: serve native ES modules to the browser
  during dev (instant startup, no bundling), then run a real production
  build (rollup) for shipping. HMR is sub-second.
Vite সবচেয়ে দ্রুত dev server — module-গুলো সরাসরি browser-এ পাঠায়, তাই startup instant, hot-reload প্রায় তাৎক্ষণিক।

4. ESLint — Catch Bugs Early

// eslint.config.js  (flat config, ESLint 9+)
import js from "@eslint/js";

export default [
    js.configs.recommended,
    {
        languageOptions: { ecmaVersion: 2024, sourceType: "module" },
        rules: {
            "eqeqeq":             "error",
            "no-var":             "error",
            "prefer-const":       "warn",
            "no-unused-vars":     "warn",
            "no-console":         "off"
        }
    }
];

$ npm run lint     # lints the whole project

5. Prettier — Stop Arguing About Style

// .prettierrc.json
{
    "semi":         true,
    "singleQuote":  false,
    "tabWidth":     4,
    "printWidth":   100,
    "trailingComma": "all"
}

$ npx prettier --write .

VS Code: install Prettier extension, enable "Format On Save".

6. .gitignore

node_modules/
dist/
.env
.DS_Store
.vscode/
*.log
Never commit node_modules It's hundreds of MB and reproducible from package.json+lockfile. Same for .env — secrets don't belong in git.

7. A Real-World Workflow

  1. npm create vite@latest → scaffold
  2. Install eslint, prettier as dev deps
  3. Add "lint" + "format" scripts
  4. VS Code: ESLint + Prettier extensions, format-on-save
  5. Optional: husky + lint-staged to lint on commit
  6. npm run dev — code with HMR
  7. npm run build — minified dist/
  8. npm run preview — sanity-check the build
  9. Push, deploy on Netlify/Vercel/Render

8. Sandbox-Safe semver Compare

semver.js
const cmp = (a, b) => {
    const [a1, a2, a3] = a.split(".").map(Number);
    const [b1, b2, b3] = b.split(".").map(Number);
    return a1 - b1 || a2 - b2 || a3 - b3;
};
console.log(cmp("4.17.21", "4.17.5"));   // > 0
console.log(cmp("4.17.21", "5.0.0"));    // < 0

9. Glossary (শব্দকোষ)

TermMeaningবাংলায়
npmNode Package Manager — installs and manages packages.Package install ও manage করার tool।
package.jsonProject metadata + scripts + dependencies file.Project-এর metadata, script, dependency রাখার ফাইল।
Lockfilepackage-lock.json — pins exact versions for reproducible installs.সঠিক version pin করে — reproducible install।
SemverMajor.Minor.Patch versioning. ^ bumps minor/patch; ~ bumps patch.Major.Minor.Patch versioning standard।
npxRun an npm binary without installing globally.Global install ছাড়াই package binary চালানো।
ViteLightning-fast dev server + bundler (rollup-powered).দ্রুত dev server + bundler।
HMRHot Module Replacement — instant in-page updates while editing.Edit-এর সাথে instant in-page update।
ESLintLinter that flags bug-prone or style-inconsistent code.Bug ও style সমস্যা ধরে দেওয়া linter।
PrettierOpinionated code formatter — settles style debates.Opinionated formatter — style বিতর্ক শেষ।
.gitignoreList of files git should not track (node_modules/, .env).Git track করবে না এমন ফাইলের list।
সংক্ষেপে: চারটি tool — npm + Vite + ESLint + Prettier — আধুনিক JS development-এর backbone। package-lock.json commit করুন, node_modules/ এবং .env ignore করুন। VS Code-এ Format-on-Save চালু করলে style নিয়ে আর ভাবতে হবে না।

10. Practice Problems

  1. Initialize a new project with npm and add Vite as a dev dep (commands).
    ✨ Show Answer
    $ npm init -y
$ npm install -D vite
$ npx vite
  2. Why commit package-lock.json but not node_modules?
    ✨ Show Answer

    Answer: The lockfile pins exact versions so every install is reproducible — small text, easy to diff. node_modules is hundreds of MB of generated files that npm install can recreate from the lockfile in seconds.

  3. What does "^4.17.21" mean in semver?
    ✨ Show Answer

    Answer: "Any 4.x.x version where x is at least 17 and patch >= 21" — i.e. compatible upgrades that keep the major version at 4. The ^ caret allows minor and patch bumps; ~ tilde allows only patch bumps.

  4. Add a "build" and "preview" script (sketch).
    ✨ Show Answer
    "scripts": {
    "build":   "vite build",
    "preview": "vite preview"
}
  5. Sketch an ESLint rule that forbids ==.
    ✨ Show Answer
    // eslint.config.js
rules: { "eqeqeq": "error" }
  6. Why is Vite faster than older Webpack-based dev servers?
    ✨ Show Answer

    Answer: Vite serves your source as native ES modules to the browser during development — no full-project bundling on every change. Modules are only transformed on demand. Webpack used to walk the full graph to rebuild a bundle each time, which got slow on large projects.

  7. Compare semver tags using a runnable function.
    ✨ Show Answer
    a7.js
    const cmp = (a, b) => {
    const A = a.split(".").map(Number);
    const B = b.split(".").map(Number);
    return A[0] - B[0] || A[1] - B[1] || A[2] - B[2];
};
console.log(cmp("3.4.5", "3.4.6") < 0);
console.log(cmp("4.0.0", "3.99.99") > 0);
  8. In one paragraph, why have ESLint and Prettier together?
    ✨ Show Answer

    Answer: ESLint catches potential bugs (unused vars, ==, missing return, accidentally-async). Prettier handles formatting (spacing, line breaks, quotes). Different jobs, different tools — together they free your team from arguing about style and from missing easy bugs in code review.

Summary — Module 34

Every real JS project leans on the same four tools: npm to manage deps, Vite for the dev server + build, ESLint to catch bugs, Prettier to settle formatting fights. Commit package-lock.json, ignore node_modules, and lint on save.

npm + Vite + ESLint + Prettier — চারটি tool যা ছাড়া আধুনিক JS project অসম্পূর্ণ। Lock-file commit করুন; node_modules কখনোই না।

Next Module → TypeScript Preview।

L33: FP Next: TypeScript