React スキャフォールディングのパスエイリアスを設定する方法

この記事を書いている時点でのReactのバージョンは16.13.1です

1 npm run ejectコマンドを入力して、プロジェクトのルートディレクトリにconfigディレクトリを生成します。

2 confilgの下のwebpack.config.jsファイルを開き、次の場所を見つけます。

エイリアス: {
   // React Native Web をサポート
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'リアクトネイティブ': 'リアクトネイティブウェブ',
   // ReactDevTools でよりよいプロファイリングが可能になります
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/プロファイリング',
     'スケジューラ/トレース': 'スケジューラ/トレースプロファイリング',
   }）、
   ...(modules.webpackAliases || {})、
},

3 以下のように変更し、プロジェクトを再起動します

エイリアス: {
   // React Native Web をサポート
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'リアクトネイティブ': 'リアクトネイティブウェブ',
   // ReactDevTools でよりよいプロファイリングが可能になります
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/プロファイリング',
     'スケジューラ/トレース': 'スケジューラ/トレースプロファイリング',
   }）、
   ...(modules.webpackAliases || {})、
   // ファイルパスエイリアス '@': path.resolve(__dirname, '../src'),
   '@view': パスを解決します(__dirname, '../src/view'),
},

プロキシを設定します。

シンプルバージョン構成:

package.json に直接追加: "proxy": "http://localhost:4000"

フルバージョンの構成:
（1）ダウンロード：yarn add http-proxy-middleware
（2）srcディレクトリに次の内容のsetupProxy.jsを作成します。

  const proxy = require('http-proxy-middleware')
  モジュール.エクスポート = 関数(アプリ) {
   アプリを使用する(
    proxy.createProxyMiddleware('/api', { //api を含むリクエストは転送する必要があります target: 'http://localhost:4000', // これはサーバーのアドレスです changeOrigin: true, //値はブール値です。true の場合、リクエストを受信してユーザーに代わってリクエストを送信するための仮想サーバーがローカルに作成されます。
     パス書き換え: {'^/api': ''}
    })
   ）
  }

3. 注意: React スキャフォールディングがプロキシで構成された後、リソースを要求するときにフロントエンドリソースが最初に要求されます。リソースがない場合、バックエンドリソースが要求されます。

React スキャフォールディングのパスエイリアスを設定する方法についての記事はこれで終わりです。React スキャフォールディングのパスエイリアスを設定する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: