Какие конфиги настраивал?

Конфигурационные файлы в современной Frontend-разработке

В процессе разработки я настраиваю широкий спектр конфигурационных файлов, которые образуют инфраструктурный фундамент проекта. Эти файлы можно разделить на несколько категорий:

1. Конфигурация сборки и транспиляции

Babel (.babelrc, babel.config.js) - настройка транспиляции современного JavaScript:

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { chrome: '58' } }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime'
  ]
};

Webpack (webpack.config.js) - модульная система сборки:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

Vite (vite.config.js) - современный альтернативный бандлер:

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
});

2. Конфигурация инструментов разработки

ESLint (.eslintrc.js) - линтинг JavaScript/TypeScript:

module.exports = {
  extends: ['airbnb', 'plugin:prettier/recommended'],
  rules: {
    'react/prop-types': 'off',
    'import/prefer-default-export': 'off'
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Prettier (.prettierrc) - форматирование кода:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

TypeScript (tsconfig.json) - типизация проекта:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. Конфигурация тестирования

Jest (jest.config.js) - юнит-тестирование:

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy'
  },
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}']
};

Cypress (cypress.json) - E2E-тестирование:

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "defaultCommandTimeout": 5000
}

4. Конфигурация среды и деплоя

Environment Variables (.env, .env.local, .env.production):

REACT_APP_API_URL=https://api.example.com
REACT_APP_SENTRY_DSN=your_dsn_here
NODE_ENV=production

Docker (Dockerfile, docker-compose.yml) - контейнеризация:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80

5. Дополнительные конфигурации

• PostCSS (postcss.config.js) - обработка CSS
• Stylelint (.stylelintrc) - линтинг стилей
• Husky (.husky/) - Git hooks для pre-commit проверок
• GitHub Actions (.github/workflows/) - CI/CD пайплайны

Ключевые принципы конфигурации

1. Декларативность: Конфиги описывают ЧТО нужно сделать, а не КАК
2. Модульность: Разделение конфигов по ответственностям
3. Версионирование: Все конфиги хранятся в репозитории
4. Документированность: Комментарии в сложных настройках
5. Совместимость: Поддержка разных сред (development/production)

Глубокая настройка конфигурационных файлов позволяет оптимизировать процесс разработки, обеспечить консистентность кода, повысить производительность сборки и создать предсказуемую среду для всей команды. Каждый проект требует индивидуального подхода к конфигурации, балансируя между стандартными настройками и специфическими требованиями бизнес-логики.