response.js - запуск npm, запуск сборки с пользовательскими путями

Бег npm run build команда на react-create-app Проект создает папку сборки и некоторые пути по умолчанию во всех файлах, как в файлах карты:

{"version":3,"sources":["../static/js/main.500cb0d9.js" ...

Могу ли я изменить все пути внутри папки сборки в соответствии с моим BE, например

{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...

package.json:

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
Источник

1 ответ

Решение

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

1. Установив свойство домашней страницы в вашем файле package.json

Обратите внимание на строку 5:

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "homepage": "mywebsite/web",
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

( см. документацию)

2. Использование переменной окружения PUBLIC_URL

При запуске задания сборки добавьте env var прямо перед ним, например так:

PUBLIC_URL=mywebsite/web npm run build

( см. документацию)

Что оно делает?

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

Это приведет к тому, что пути, включающие комплекты JavaScript и CSS в сгенерированном index.html, будут абсолютными в соответствии с заданным значением:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="mywebsite/web/manifest.json">
    <link rel="shortcut icon" href="mywebsite/web/favicon.ico">
    <title>React App</title>
    <link href="mywebsite/web/static/css/main.c17080f1.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>

</html>
Источник

Проверьте постоянное решение этого сообщения, я считаю, что это лучший удобный способ:

https://github.com/facebook/create-react-app/issues/2575

Для вашего удобства я скопировал и вставил сюда:

Создайте файл с именем.env в корне вашего проекта (там же, где находится package.json). В этом файле напишите следующее (без кавычек вокруг URL):

PUBLIC_URL=https://dsomething.cloudfront.net

Создайте свой проект как обычно (npm run build). Это также создаст index.html с помощью:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
Источник

Следя за @patrick hund, поскольку расположение документации было перемещено, и, похоже, некоторые шаги изменились. Вы можете прочитать здесь и соответственно интерпретировать:расширенное развертывание в CRA.

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

Если вы не используете API истории HTML5 pushState или вообще не используете маршрутизацию на стороне клиента, указывать URL-адрес, с которого будет обслуживаться ваше приложение, необязательно. Вместо этого вы можете поместить это в свой package.json:"homepage": ".",Это гарантирует, что все пути к ресурсам относятся к index.html. После этого вы сможете переместить свое приложение с http://mywebsite.com на http://mywebsite.com/relativepath или даже http://mywebsite.com/relative/path без необходимости перестраивать его.

Источник
Другие вопросы по тегам