JavaScript Development Tools & Build Systems

// Package.json example
{
  "name": "my-javascript-project",
  "version": "1.0.0",
  "description": "A modern JavaScript project",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest",
    "lint": "eslint src/**/*.js",
    "format": "prettier --write src/**/*.js"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.0",
    "eslint": "^8.40.0",
    "prettier": "^2.8.8",
    "jest": "^29.5.0"
  }
}

// npm commands
// npm install package-name
// npm install --save-dev package-name
// npm run script-name
// npm update
// npm audit

// yarn commands (alternative to npm)
// yarn add package-name
// yarn add --dev package-name
// yarn run script-name
// yarn upgrade
// yarn audit

// pnpm commands (faster alternative)
// pnpm add package-name
// pnpm add --save-dev package-name
// pnpm run script-name
// pnpm update

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['axios', 'lodash']
        }
      }
    }
  }
});

// Webpack configuration (webpack.config.js)
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

// Rollup configuration (rollup.config.js)
import { defineConfig } from 'rollup';
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default defineConfig({
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled' })
  ]
});

// Babel configuration (.babelrc)
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

// Modern JavaScript features that get transpiled
// Arrow functions
const add = (a, b) => a + b;

// Template literals
const message = `Hello ${name}!`;

// Destructuring
const { name, age } = user;

// Spread operator
const newArray = [...oldArray, newItem];

// Optional chaining
const value = user?.profile?.settings?.theme;

// Nullish coalescing
const defaultValue = user?.name ?? 'Anonymous';

// Class properties
class User {
  name = 'John';
  age = 30;
  
  greet = () => {
    return `Hello ${this.name}`;
  };
}

// These get transformed to ES5 compatible code

// Exercise: Set up a complete development environment
// 1. Initialize a new project
// npm init -y

// 2. Install essential dependencies
// npm install --save-dev vite @vitejs/plugin-react eslint prettier

// 3. Create project structure
/*
my-project/
├── src/
│   ├── components/
│   ├── utils/
│   ├── styles/
│   └── index.js
├── public/
├── dist/
├── package.json
├── vite.config.js
├── .eslintrc.js
├── .prettierrc
└── README.md
*/

// 4. Configure Vite (vite.config.js)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

// 5. Configure ESLint (.eslintrc.js)
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
    'prefer-const': 'error'
  }
};

// 6. Configure Prettier (.prettierrc)
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

// 7. Add scripts to package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .js,.jsx",
    "lint:fix": "eslint src --ext .js,.jsx --fix",
    "format": "prettier --write src/**/*.{js,jsx,css,md}"
  }
}

// 8. Create a simple React component
// src/components/App.js
import React from 'react';

function App() {
  return (
    <div className="app">
      <h1>Hello from Vite + React!</h1>
      <p>This is a modern development setup.</p>
    </div>
  );
}

export default App;

// 9. Create entry point
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 10. Run the development server
// npm run dev