私はしばらくの間、反応アプリの作成を使用しています。 「npm start」または「yarn start」オートリロードはそれ自体で正常に動作しますが、今は別の問題があります。現在、ビルドフォルダーを介してエクスプレスサーバーでアプリを実行し、エクスプレスがビルドファイルを提供しているため、「npm run build」を使用します。この方法でアプリを実行する必要がある多くのAPI呼び出しがあります。毎回手動で「npm run build」を実行するのは面倒です。アプリをイジェクトせずに「npm start」のように自動的にビルドする簡単な方法または回避策はありますか?ありがとう
残念ながら、これは自分でやらなければならないことです。ただし、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を起動し、変更時にアセットを再構築できるようにします。
これは実際にはあなたの質問に答えませんが、開発中にnpm run build
を使用するべきではありません。再構築が遅いだけでなく、パフォーマンスとサイズに関する重要なReact警告をスキップします。そのため、警告の詳細が少なくなります。
ExpressでAPIリクエストを行う必要がある場合は、 proxy
機能を使用 を使用すると、npm start
からサーバーにAPIリクエストをプロキシできます。また、 tutorial と一致する repository があり、その方法を示しています。
もちろん、本番環境では、npm run build
によって生成されたビルドを使用する必要があります。ただし、展開する前に実行するだけで済みます。
私はまた、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:本番ビルドを実行します
別のポートでバックエンドを実行します。 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}`)