JavaScript Ecosystem Skill

Quick Reference Card

npm Commands

npm init -y                  # Initialize
npm install pkg              # Add dependency
npm install -D pkg           # Dev dependency
npm install -g pkg           # Global
npm update                   # Update all
npm audit fix                # Fix vulnerabilities
npm run script               # Run script

package.json

{
  "name": "project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "lint": "eslint src"
  },
  "dependencies": {},
  "devDependencies": {}
}

Vite Config (Recommended)

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  build: { sourcemap: true }
});

Vitest Testing

import { describe, it, expect, vi } from 'vitest';

describe('Calculator', () => {
  it('adds numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('mocks function', () => {
    const mock = vi.fn().mockReturnValue(42);
    expect(mock()).toBe(42);
  });
});

ESLint Config

// .eslintrc.cjs
module.exports = {
  env: { browser: true, es2022: true },
  extends: ['eslint:recommended'],
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error'
  }
};

Prettier Config

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

GitHub Actions CI

name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test
      - run: npm run build

Troubleshooting

Common Issues

Debug Checklist

# 1. Clear caches
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

# 2. Check versions
node --version
npm --version
npm ls <package>

# 3. Verbose output
npm run build --verbose

Production Patterns

Environment Variables

// .env
VITE_API_URL=https://api.example.com

// Usage
const url = import.meta.env.VITE_API_URL;

Code Splitting

// Dynamic import
const Component = React.lazy(() => import('./Component'));

// With Suspense
<Suspense fallback={<Loading />}>
  <Component />
</Suspense>

Related

• Agent 07: JavaScript Ecosystem (detailed learning)
• Skill: testing: Test frameworks
• Skill: modern-javascript: ES modules