WebStormでReact Express Webpackアプリをデバッグする方法

Question

react-expressアプリケーションのバックエンドをデバッグしようとしています。バンドルにwebpackを使用しています。

フロントエンドとバックエンドの両方をデバッグできるようにWebStormの設定を編集するにはどうすればよいですか？私はWebStorm 2016を使用しています。

Answer 1

WebStromに関するいくつかのドキュメントを読んで、ついにそれを稼働させました。最初にを選択してください。を選択すると、の実行/デバッグ設定を編集できるメニューが表示されます。左側の+ボタンをクリックし、ノードjsを追加します。その変更からノードインタプリタをデフォルトの（ローカル）node_modulesからプロジェクト依存関係のベイベルノードに変更します。例えば〜/ MyWork/Project/node_modules/.bin/babel-nodeのようになります。次に、--presets = babel-preset-es2015をというように追加します。ノードのパラメータ。残りの設定を入力し、[保存]をクリックしてプロジェクトを実行します。

ここに例を示します。

Answer 2

サーバー側コードをデバッグし、クライアント側コードのJavaScriptデバッグ構成を作成して開始するには、Node.js実行/デバッグ構成を作成して起動する必要があります。

JavaScriptファイルフィールドのNode.js設定では、サーバーを起動するファイルへのパスを指定する必要があります。

[URL]フィールドのJavaScript設定で、サーバーが実行されているURLを指定します。ローカルパスとリモートURLの間のマッピングを設定する必要があるかもしれません。これはおそらく、コンポーネントがあるフォルダとwebpack：///の間にあるはずです。 （詳細はanswerを参照してください）。

また、Webpackの設定にdev-tools: 'source-map'があることを確認してください。