В этой статье блога мы рассмотрим различные методы настройки выходного каталога в проекте Create React App (CRA) с помощью TypeScript. По умолчанию CRA генерирует связанные файлы JavaScript в каталоге «build». Однако бывают ситуации, когда вам может потребоваться изменить этот выходной каталог на другое место. Мы обсудим несколько подходов к достижению этой настройки вместе с примерами кода.

Метод 1: изменение сценария «сборки» в package.json
Один простой способ изменить выходной каталог — изменить сценарий «сборки» в файле package.json. По умолчанию он запускает команду сборки act-scripts, которая создает готовую к работе сборку в каталоге «build». Чтобы изменить этот каталог, обновите скрипт следующим образом:

"scripts": {
  "build": "react-scripts build && mv build custom-output-dir"
}

В этом примере выполняется команда сборки, а затем каталог «build» перемещается в пользовательский выходной каталог с именем «custom-output-dir».

Метод 2: использование пакета «react-app-rewired»
Другой метод предполагает использование пакета «react-app-rewired», который позволяет настраивать конфигурацию CRA по умолчанию без его извлечения. Чтобы изменить выходной каталог с помощью «react-app-rewired», выполните следующие действия:

Шаг 1. Установите необходимые пакеты:

npm install react-app-rewired customize-cra --save-dev

Шаг 2. Создайте файл config-overrides.js в корневом каталоге вашего проекта и добавьте следующий код:

const path = require('path');
module.exports = function override(config, env) {
  // Update the output directory
  config.output.path = path.join(__dirname, 'custom-output-dir');

  return config;
};

Шаг 3. Обновите раздел «scripts» в package.json, чтобы использовать «react-app-rewired» вместо «react-scripts»:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  ...
}

Метод 3: использование вилки «react-scripts».
Если вы предпочитаете не использовать «react-app-rewired», вы можете создать вилку пакета «react-scripts» и изменить ее в соответствии с вашими потребностями. потребности. Вот как это можно сделать:

Шаг 1. Создайте новый каталог с именем «custom-react-scripts» в корневом каталоге вашего проекта.

Шаг 2. Скопируйте каталог «scripts» из «node_modules/react-scripts» в «custom-react-scripts».

Шаг 3. Обновите файл «scripts/build.js» внутри «custom-react-scripts», чтобы изменить путь вывода. Найдите строку, начинающуюся с const paths = require(, и обновите ее следующим образом:

const paths = require(`../config/paths`);
paths.appBuild = path.join(paths.appPath, 'custom-output-dir');

Шаг 4. Обновите раздел «scripts» в package.json, чтобы использовать специальную вилку «react-scripts»:

"scripts": {
  "start": "react-scripts start",
  "build": "node custom-react-scripts/scripts/build.js",
  "test": "react-scripts test",
  ...
}

Настроить выходной каталог в проекте Create React App с помощью TypeScript можно различными методами. Мы рассмотрели три подхода к изменению сценария «сборки», используя «react-app-rewired» и создав ответвление «реагирующих сценариев». Выберите метод, который лучше всего соответствует требованиям вашего проекта, и следуйте предоставленным примерам кода для его успешной реализации.