web-dev-qa-db-ja.com

create-react-appを自動ビルドする方法は？

私はしばらくの間、反応アプリの作成を使用しています。 「npm start」または「yarn start」オートリロードはそれ自体で正常に動作しますが、今は別の問題があります。現在、ビルドフォルダーを介してエクスプレスサーバーでアプリを実行し、エクスプレスがビルドファイルを提供しているため、「npm run build」を使用します。この方法でアプリを実行する必要がある多くのAPI呼び出しがあります。毎回手動で「npm run build」を実行するのは面倒です。アプリをイジェクトせずに「npm start」のように自動的にビルドする簡単な方法または回避策はありますか？ありがとう

javascriptnode.jsreactjsexpresscreate-react-app
11
Sean sean

残念ながら、これは自分でやらなければならないことです。ただし、npm-watchなどのツールを使用して、目的を達成できます。

Npm-watchをインストールする

npm i --save-dev npm-watch

package.json

{
  "name": "react-app",
  "version": "0.1.0",
  "private": false,
  "devDependencies": {
    "npm-watch": "^0.1.8",
    "react-scripts": "0.9.5",
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "watch": "npm-watch"
  },
  "watch": {
    "build": "src/"
  }
}

その後、npm run watchを使用してnpm-watchを起動し、変更時にアセットを再構築できるようにします。

18
Brian

これは実際にはあなたの質問に答えませんが、開発中にnpm run buildを使用するべきではありません。再構築が遅いだけでなく、パフォーマンスとサイズに関する重要なReact警告をスキップします。そのため、警告の詳細が少なくなります。

ExpressでAPIリクエストを行う必要がある場合は、 proxy機能を使用 を使用すると、npm startからサーバーにAPIリクエストをプロキシできます。また、 tutorial と一致する repository があり、その方法を示しています。

もちろん、本番環境では、npm run buildによって生成されたビルドを使用する必要があります。ただし、展開する前に実行するだけで済みます。

10
Dan Abramov

私はまた、react appの作成も使用しています。これは、開発用（windows）のプロジェクトを実行し、プロダクションビルドをビルドし、プロダクションビルドを実行するようにスクリプトを変更する方法です。

"scripts": {
    "start": "set PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "deploy": "set PORT=8008 && serve -s build"
  }

npm start：開発用のプロジェクトを実行します（windows）npm run-script build：本番ビルドをビルドしますnpm run-script deploy：本番ビルドを実行します

  • npm install -gは、npm run-script deployを実行する前に機能します。
0
Viraj

別のポートでバックエンドを実行します。 Expressで実行している場合、ファイルbin/wwwを変更します

var port = process.env.PORT || 9000

/ srcフォルダーに、APIホスト、ルート、パラメーターなどを構成する構成ファイルを作成します

//config/index.js
export const Config = {
   protocol: 'http',
   Host: window.location.hostname, //or the environment variable
   params: '/api/',
   api: {post:'/posts/'}
}

そして、あなたの呼び出しコンポーネントまたはAPIの呼び出し先

import {Config} from '../config'

axios.get(`${Config.protocol}${Config.Host}${Config.params}${Config.api.posts}${some id i guess}`)
0
KornholioBeavis