web-dev-qa-db-ja.com

react.js-カスタムパスでnpm run buildを実行する

ランニング 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"
  }
}
reactjsnpm-scriptsnpm-runreact-create-app
8
Itsik Mauyhas

次の2つの方法のいずれかを使用して、本番環境でReactアプリを提供するためのルートパスを設定できます。

1。 package.jsonfileにホームページプロパティを設定する

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環境変数の使用

buildジョブを実行するときは、次のように、その直前にenv varを追加します。

PUBLIC_URL=mywebsite/web npm run build

（ ドキュメントを参照 ）

それは何をしますか？

これらのメソッドはソースマップファイルのパスを変更しません、それらは常に相対パスですが、デプロイすることをできますあなたのReactアプリをあなたの選択した絶対パスであなたのウェブサーバーに。

設定した値に従って、生成されたindex.htmlにJavaScriptおよびCSSバンドルを含むパスが絶対パスになります。

<!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>
9
Patrick Hund