У проектах, створених за допомогою Create React App, місце розміщення і назва каталогу для збірки (build) за замовчуванням визначаються у файлі конфігурації package.json. Стандартно вивід збірки поміщається в каталог build у корені проекту. Однак ви можете налаштувати це місце за допомогою змінних середовища або змінюючи конфігурацію webpack, якщо ви ежектували проект.
Змінна середовища PUBLIC_URL
Однією з варіантів налаштування шляху до збірки є використання змінної середовища PUBLIC_URL. Ця змінна визначає кореневий URL, де ваш додаток буде доступний публічно. Вона також впливає на шляхи до статичних файлів у вашій збірці.
Приклад в .env.production: PUBLIC_URL=/path/to/build
Це змусить React додавати /path/to/build як базовий шлях для всіх відносних URL у вашому проекті.
Кастомізація через package.json
Для кастомізації шляху до папки збірки безпосередньо в package.json без використання ежектування конфігурації є обмежені можливості, оскільки Create React App за замовчуванням не надає інструментів для зміни каталогу збірки через конфігурацію.
Ежект та налаштування Webpack
Якщо стандартна конфігурація вам не підходить, ви можете “ежектнути” ваш проект. Це дозволить вам отримати доступ до конфігураційних файлів, зокрема до конфігурації webpack, де ви зможете змінити каталог збірки.
npm run eject
Після ежектування ви знайдете конфігураційні файли у папці config у вашому проекті. Ви зможете модифікувати webpack.config.js, щоб змінити шлях збірки:
// webpack.config.js output: { // Замініть ‘build’ на вашу папку path: path.resolve(__dirname, ‘your_custom_folder’), publicPath: ‘/’ }
Це змінить каталог, де Webpack виводить файли під час збірки. Це більш гнучкий, але й більш складний спосіб налаштування, оскільки вимагає від вас розуміння того, як працює Webpack та інші налаштування вашого проекту.
якщо проект vite
Для проектів, створених за допомогою Vite, ви можете кастомізувати шлях та назву каталогу збірки використовуючи файл конфігурації vite.config.js. Vite надає гнучкість у налаштуванні параметрів збірки, що дозволяє вам легко змінювати місце розташування та структуру вихідних файлів.
Основні кроки для зміни каталогу збірки у Vite:
- Відкрийте або створіть файл vite.config.js у корені вашого проекту.
- Додайте або змініть налаштування build, щоб вказати новий шлях для каталогу збірки.
Ось приклад налаштування шляху збірки у Vite:
// vite.config.js
import { defineConfig } from ‘vite’;
export default defineConfig({
build:
{ outDir: ‘dist’, // Змініть ‘dist’ на бажаний каталог для вашої збірки
} });
Ця конфігурація вказує Vite виводити збірку в каталог dist, який є стандартним, але ви можете замінити його на будь-який інший каталог, який вам потрібен.
Використання змінних середовища для розрізнення розробки та продакшну
Також можна використовувати змінні середовища для динамічного налаштування шляхів залежно від середовища, у якому запускається проект. Наприклад, ви можете використати process.env.NODE_ENV для визначення, чи запущений проект у режимі розробки чи у продакшну.
// vite.config.js
import { defineConfig } from ‘vite’;
export default defineConfig({
build: {
outDir: process.env.NODE_ENV === ‘production’ ? ‘build’ : ‘dist’,
} });
У цьому прикладі, якщо середовище є продакшн (production), то вихідні файли будуть поміщені у каталог build, інакше – у dist.
Ці налаштування дозволяють вам гнучко керувати місцем розташування ваших вихідних файлів залежно від потреб розробки або виробництва, і є типовим прикладом ефективного управління конфігурацією збірки в сучасних JavaScript-проектах.