Использовать пользовательскую сборную папку при использовании приложения create-react-app

Ответ 1

Вы не можете изменить имя выходной папки сборки с текущими параметрами конфигурации.

Кроме того, вы не должны. Это часть философии react-create-app: они говорят Конвенция по конфигурации.

Если вам действительно нужно переименовать свою папку, я вижу два варианта:

• Сразу после завершения процесса сборки напишите команду, которая копирует содержимое папки сборки в другую папку, которую вы хотите. Например, вы можете попробовать copyfiles пакет npm или что-то подобное.

• Вы можете попробовать изгнать action-create-app и настроить конфигурацию.

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

  Вместо этого он скопирует все файлы конфигурации и переходные зависимости (Webpack, Babel, ESLint и т.д.) прямо в ваш проект, чтобы вы имели полный контроль над ними. Все команды, кроме eject, по-прежнему будут работать, но они будут указывать на скопированные сценарии, чтобы вы могли их настроить. На данный момент youre самостоятельно.

  Однако важно отметить, что это односторонняя операция. Как только вы выбросите, вы не можете вернуться! Вы потеряете все будущие обновления.

Поэтому Я бы рекомендовал вам не использовать имена имен пользовательских папок, если возможно. Попытайтесь придерживаться именования по умолчанию. Если нет, попробуйте # 1. Если он по-прежнему не работает для вашего конкретного случая использования, и у вас действительно нет вариантов - исследуйте №2. Удачи!

Ответ 2

Измените свой пакет package.json:

"build": "react-scripts build && mv build webapp"

Ответ 3

Версия приложения "ответная реакция" 2+ ответ

Для последних (> v2) версий create-реагировать-приложение (и, возможно, также более старые), добавьте следующую строку в ваш package.json, а затем перестройте.

"homepage": "./"

Теперь вы должны увидеть, что build/index.html будет иметь относительные ссылки ./static/... вместо ссылок на корень сервера: /static/...

Ответ 4

Ответ Феликса правильный и подтвержденный, поддержанный самим Даном Абрамовым.

Но для тех, кто хотел бы изменить структуру самого вывода (в папке build), можно запускать команды post-build с помощью postbuild, который автоматически запускается после сценария build определенного в файле package.json.

Пример ниже меняет его со static/ на user/static/, перемещая файлы и обновляя ссылки на файлы в соответствующих файлах (полный список здесь):

package.json

{
  "name": "your-project",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "./postbuild.sh",
    [...]
  },
}

postbuild.sh

#!/bin/bash

# The purpose of this script is to do things with files generated by
# 'create-react-app' after 'build' is run.
# 1. Move files to a new directory called 'user'
#    The resulting structure is 'build/user/static/<etc>'
# 2. Update reference on generated files from
#    static/<etc>
#     to
#    user/static/<etc>
#
# More details on: https://github.com/facebook/create-react-app/issues/3824

# Browse into './build/' directory
cd build
# Create './user/' directory
echo '1/4 Create "user" directory'
mkdir user
# Find all files, excluding (through 'grep'):
# - '.',
# - the newly created directory './user/'
# - all content for the directory'./static/'
# Move all matches to the directory './user/'
echo '2/4 Move relevant files'
find . | grep -Ev '^.$|^.\/user$|^.\/static\/.+' | xargs -I{} mv -v {} user
# Browse into './user/' directory
cd user
# Find all files within the folder (not subfolders)
# Replace string 'static/' with 'user/static/' on all files that match the 'find'
# ('sed' requires one to create backup files on OSX, so we do that)
echo '3/4 Replace file references'
find . -type f -maxdepth 1 | LC_ALL=C xargs -I{} sed -i.backup -e 's,static/,user/static/,g' {}
# Delete '*.backup' files created in the last process
echo '4/4 Clean up'
find . -name '*.backup' -type f -delete
# Done

Ответ 5

Основываясь на ответах Бена Карпа и Уоллеса Сидре:

Это то, что я использую, чтобы скопировать всю мою папку сборки в общую папку Wamp.

package.json

{
  "name": "[your project name]",
  "homepage": "http://localhost/[your project name]/",
  "version": "0.0.1",
  [...]
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./post_build.ps1",
    [...]
  },
}

post_build.ps1

Copy-Item "./build/*" -Destination "C:/wamp64/www/[your project name]" -Recurse -force

Строка домашней страницы нужна только в том случае, если вы развертываете подпапку на своем сервере (см. Ответ на другой вопрос).

Ответ 6

У меня был такой сценарий, как хочу переименовать папку и изменить расположение вывода сборки, и использовал приведенный ниже код в package.json с последней версией
"build": "сборка реагирующих сценариев && mv build../my_bundles",

Ответ 7

Windows Powershell Script

//package.json
"scripts": {
    "postbuildNamingScript": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./powerShellPostBuildScript.ps1",


// powerShellPostBuildScript.ps1
move build/static/js build/new-folder-name 
(Get-Content build/index.html).replace('static/js', 'new-folder-name') | Set-Content 
build/index.html
"Finished Running BuildScript"

npm run postbuildNamingScript в powershell, чтобы переместить файлы JS в "build/new-folder-name" и указать новое местоположение из HTML.

Ответ 8

Откройте командную строку внутри источника приложения. Запустите команду

Npm Run Eject

Откройте файл scripts/build.js и добавьте его в начало файла после строки "use strict"

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the current path
.....

Откройте config/paths.js и измените свойство buildApp в объекте экспорта в папку назначения. (Здесь я предоставляю 'response-app-scss' в качестве папки назначения)

module.exports = {
.....
appBuild: resolveApp('build/react-app-scss'),
.....
}

Запустить

npm run build

Примечание: запуск платформо-зависимых скриптов не рекомендуется

Ответ 9

Вы можете обновить конфигурацию небольшим взломом в корневом каталоге:

• npm run eject
• config/webpack.config.prod.js - строка 61 - изменить путь к: __dirname + './../--your каталог выбора -
• config/paths.js - строка 68 - обновить до solveApp ('./-- ваш каталог выбора -')

заменить - ваш каталог выбора - с каталогом папок, который вы хотите построить на

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