Irbisa · Шпаргалка
Инструменты и сборка фронтенда
Бандлеры, Vite и webpack, esbuild, SWC и Babel, tree shaking, Fast Refresh, source maps, переменные окружения, целевые браузеры и полифилы, npm, semver и lockfile, линтинг, безопасность зависимостей
Что делает бандлер и зачем собирать бандл для продакшена, если браузеры уже поддерживают ES-модули?
Как работают переменные окружения в приложении на Vite и почему ключ из
VITE_API_KEYвиден каждому пользователю?// .env VITE_API_URL=http://localhost:8080// .env.production VITE_API_URL=https://api.example.com// .env.local API_SECRET=change-me (no prefix, git-ignored) // replaced with the literal string at build timeconst apiUrl = import.meta.env.VITE_API_URL;…Чем отличаются зависимости
dependencies,devDependenciesиpeerDependenciesв файлеpackage.json?{ "name": "@acme/date-picker", "version": "2.1.0", "dependencies": { "date-fns": "^4.1.0" },…Что означают
^1.2.3и~1.2.3вpackage.jsonи зачем коммитить lock-файл и запускатьnpm ciв CI?^1.2.3 >=1.2.3 <2.0.0 new minor and patch versions~1.2.3 >=1.2.3 <1.3.0 new patch versions only^0.2.3 >=0.2.3 <0.3.0 below 1.0.0 a minor bump counts as breaking1.2.3 exactly 1.2.3 npm install resolves the ranges, may rewrite package-lock.json…Как Vite работает в разработке и при продакшен-сборке и почему его дев-сервер стартует быстрее, чем у webpack?
Что такое Hot Module Replacement и как React Fast Refresh сохраняет стейт компонента, когда вы сохраняете файл?
Найдите баг: каждая правка
ThemeProvider.tsxперезагружает всю страницу и стирает наполовину заполненную форму вместо горячего обновления.// ThemeProvider.tsx (main.tsx renders <ThemeProvider><App /></ThemeProvider>)import { createContext, useContext, type ReactNode } from 'react'; export const ThemeContext = createContext<'light' | 'dark'>('light'); export function ThemeProvider({ children }: { children: ReactNode }) { return <ThemeContext value="dark">{children}</ThemeContext>;} export function useTheme() { return useContext(ThemeContext);}Чем в webpack лоадер отличается от плагина?
// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/main.tsx',…Чем транспиляция отличается от бандлинга и что делают Babel, SWC, esbuild и
tscв сборке React-приложения?// types.tsexport interface User { id: string; name: string;}export const GUEST: User = { id: '0', name: 'Guest' };…Какие из этих импортов бандлер может удалить через tree shaking и что мешает удалить остальные?
// utils.ts exports formatPrice and parseCsvimport { formatPrice } from './utils';// lodash ships CommonJS, lodash-es ships ES modules with "sideEffects": falseimport { debounce } from 'lodash';import { throttle } from 'lodash-es';// dates.ts exports 40 small date helpersimport * as dates from './dates';// setupI18n.ts calls i18n.init() at the top levelimport './setupI18n'; export function bind(input: HTMLInputElement, helper: keyof typeof dates) { const fmt = dates[helper]; // chosen at runtime input.oninput = debounce(() => fmt(input.value), 300); window.onscroll = throttle(() => console.log(formatPrice(9.99)), 100);}Зачем продакшен-сборка добавляет хеш в имя каждого файла и когда файл кладут в
public/, а не импортируют?import logoUrl from './assets/logo.svg'; // becomes /assets/logo-<hash>.svgimport heroUrl from './assets/hero.webp'; export function Header() { return ( <header>…Что такое source maps и нужно ли выкладывать их в продакшен?
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import { sentryVitePlugin } from '@sentry/vite-plugin'; export default defineConfig({ build: {…Как решить, какие браузеры поддерживать, и как связаны
browserslist, транспиляция синтаксиса и полифилы?import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import legacy from '@vitejs/plugin-legacy'; export default defineConfig({ // syntax is lowered to this list; no polyfills are added…Чем отличаются npm, Yarn и pnpm и что такое фантомная зависимость?
Что ловит ESLint такого, чего не ловит TypeScript, и как разделить работу между ESLint, Prettier и
tscв CI?// eslint.config.jsimport js from '@eslint/js';import tseslint from 'typescript-eslint';import reactHooks from 'eslint-plugin-react-hooks';import { reactRefresh } from 'eslint-plugin-react-refresh';import { defineConfig, globalIgnores } from 'eslint/config';…Что делает поле
exportsвpackage.jsonи почему пакет иногда ломается при импорте из ESM или CommonJS?{ "name": "@acme/date-utils", "version": "2.0.0", "type": "module", "exports": { ".": {…Дев-сервер стартует минуту, а продакшен-сборка идёт десять. Как найти причину и ускорить их?
Как защитить фронтенд-проект от скомпрометированного или вредоносного npm-пакета?
# pnpm-workspace.yamlminimumReleaseAge: 1440 # minutes: skip versions published less than a day agominimumReleaseAgeExclude: - '@acme/*' # our own packages may update at onceallowBuilds: # the only dependencies allowed to run install scripts esbuild: true…