ビルド時にcreate-react-appを除外/包含/変更するコード部分

Question

私はReact Webアプリケーションを開発しており、create-react-app npmユーティリティを使用しています。 私のアプリケーションは、開発中に私のローカルマシン上にあるサーバと通信します。このため、私が使用するすべてのAjaxリクエストはlocalhost:portアドレスを使用します。

もちろん、プロダクションでプロジェクトをビルドしてデプロイするときは、プロダクションに変更するにはこれらのアドレスが必要です。 ビルド時に除外、インクルード、変更されるコードの部分をマークする可能性のあるグラント・プラグイン・フロー（https://github.com/jsoverson/grunt-preprocess）は、preprocessに慣れています。例えば

：create-react-app開発環境内でそのようなことを行う方法があるかどう

//@if DEV 
const SERVER_PATH = "localhost:8888"; 
//@endif 
//@if !DEV 
const SERVER_PATH = "prot://example.com:8888"; 
//@endif 

あなたは知っていますか？

ありがとうございます！

Answer 1

サーバー側のコードがリクエストをどのように処理するかはわかりませんが、ajaxクエリで相対パスを使用する場合は、プロダクションにデプロイするときにコードを変更する必要はありません。

$.ajax({ 
    url: "something/getthing/", 
    dataType: 'json', 
    success: function (data) { 
     //do a thing 
    } 
}); 

うまくいけば役立ちます:)あなたのネットワークインタフェースを作成するとき

が

Answer 2

、PATHを使用するかを決定するためにprocess.env.NODE_ENVを使用します。たとえば、ここでは相対パスを使用してAjaxのクエリです。

if (process.env.NODE_ENV !== 'production') { 
    const SERVER_PATH = "localhost:8888"; 
} 
else { 
    const SERVER_PATH = "prot://example.com:8888"; 
} 

アプリケーションは、本番環境であるか開発環境であるかを自動的に検出し、環境に適切な値のconst SERVER_PATHを作成します。