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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactでファイルパスエイリアスを素早く設定する方法

<<:  MySQL テーブルをコピーする 3 つの方法 (要約)

>>:  JPQLに基づく純粋なSQL文方式の詳細な説明

推薦する

Vue での Vue.prototype の使用に関する詳細な説明

目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...

WeChat パブリック アカウントの録音ファイルを再生して保存します (amr ファイルを mp3 に変換)

目次オーディオトランスコーディングツール原理JAVE プロジェクトの問題このプロジェクトの特徴拡張機...

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

ウェブデザインのためのオンライン開発ツール10選の紹介

1. オンラインテキストジェネレーターBlindTextGenerator: デザイナーにとって、こ...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

nginx パニック問題の解決方法の詳細な説明

nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

MySql データベースにおける単一テーブル クエリと複数テーブル結合クエリの効率の比較

この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...