問題タブ [watchify]

私は、reactjs (0.14.7) と Chrome バージョン 48 で browserify (13.0.0) を使用しています。残念ながら、私のブレークポイントは Chrome Dev Tools では機能しません。

--debug オプションを browserify に渡して、デバッグ用のソース マップを提供します。$ browserify static/js/App.js --debug -o static/js/build/bundle.js

ホットリロードにwatchifyを使用しています: $ watchify static/js/App.js -t babelify -p livereactload -o static/js/build/bundle.js -v

ソース マップを取得しましたが、ブレークポイントを設定しようとすると、ブレークポイントが別の行にジャンプし、実際には停止しません。

デバッガーを追加すると; デバッガーの行で停止せず、ステップオーバーが正しい順序で実行されないコードを作成するにはどうすればよいですか?

問題はソース マップにあると思いますが、修正方法がわかりませんか?

componentDidMount にブレークポイントを設定しようとしており、呼び出されている console.log 呼び出しがあることに注意してください。どの時点でも設定されたブレークポイントは実行されません。

どんな洞察も高く評価されます。

更新: さらにデバッグすると、問題は watchify にあるようです。ホットリロードを使用しない場合、デバッガーはコード内で予期したとおりに停止します。

コードでデバッガーを設定すると、正しい行で停止しません。下の画像でわかるように、20 行目に設定されたブレークポイントにもかかわらず、そこで停止しません。また、21 行目の debugger ステートメントでは停止しません。代わりに、23 行目で停止し、ステップ オーバー呼び出しが異常な動作をします。debugger ステートメントが存在しない場合、Chrome 経由で設定されたブレークポイントで停止しないことに注意してください。

デバッガーの画面グラブ

洞察はまだ高く評価されています。

npm install --save-dev watchifyReact.js ワークスペースをセットアップするときにコマンドでエラーが発生します。この問題を解決するために何をする必要があるのか​​ よくわかりません。

Npm は Homebrew 経由でインストールされました。

ノード バージョン: v6.1.0 npm バージョン: 3.8.6

私は学習ReactJSを始めたばかりNodeJSで、アプリケーションを実行しようとしていますNPMが、開始直後に次のエラーが発生します。

私の開始コマンド：

全体のエラー:

それを解決するための私の努力:

node_modulesフォルダーを削除してから実行しようとしましnpm installたが、それでも同じエラーが発生し、NPMバージョンは 3.8.9 です

マイ ファイル :

main.jsx:

List.jsx:

Listitem.jsx:

コードの変更を監視し、npm と package.json のみを使用してブラウザーを自動的にリロードする方法はありますか (Gulp などの使用を避けようとしています)。

私はLinuxを使用watchifyして取得し続けようとしています

fseventsがシステムで考慮されているのはなぜですか? 厳密には Mac ツールではありませんか? inotifyノードをの代わりにデフォルトのファイル モニターとして使用するにはどうすればよいfseventsですか? watchify具体的には、ファイル変更の前後にファイルをラップしたい。どうしてこれなの？

使用してみましnode-inotify たが、何らかの理由でまだ取得しています

thisによると、私は Linux を使用しているため、inotify は自動的に起動するはずです。

モジュール、コントローラー、およびビューを使用して、基本的な Angular アプリを確立しようとしています。「{{}}」内のコンテンツを解釈する角度を取得するのに苦労しています。

すべてを「./js/bundle.js」にプッシュするBrowserifyを実行しています。

これが私のコードです：

index.html

app.js

私のブラウザは {{name.names}} しか表示しません。

ここで何が起こっているのか、何が欠けているのか、またはアプローチを改善する方法はありますか?

ありがとう！

babel-plugin-transform-html-import-to-stringを使用して、HTML テンプレート ファイルを JavaScript コンポーネントにインポートします。

watchify を使用すると、html が変更された場合に更新されません。Javascript ファイルのみが変更されます。npm スクリプトは次のようになります。

watchify -p browserify-hmr -t [babelify ext .js .html] src/index.js -o public/bundle.js

これは機能しないため、以下に示すように、代わりに watch を使用していますが、私のビルドは以前よりも少なくとも 5 秒遅くなりました。

watch 'npm run browserify' src/ -d --interval=1 browserify スクリプトの場所 browserify -t [babelify ext .js] src/index.js -o public/bundle.js

高速な再構築を犠牲にすることなく、html ファイルの変更に対して browserify を実行する方法を知っている人はいますか?