問題タブ [watchify]

共通の依存関係を持つ単一のフォルダーの下にたくさんのアプリがあります。

現在、Watchify のいくつかのインスタンスがこれらすべてに対して実行されており、それらのいずれかで何かを変更すると、そのアプリは browserify と reactify で再構築されます。ここでの考え方は、すべてのアプリが独自のコンパイル済みファイルのみを取得し、すべてのアプリを含む 1 つの巨大な JavaScript ファイルを取得しないようにすることです。これまでのところ良いです！

各アプリのエントリ ポイントmain.jsは、次のように開始されます。

アプリ固有のsomething.jsを変更すると、そのアプリが再構築され、すべてが期待どおりに機能します。ただし、いくつかのアプリが依存しているtools.jsで何かを更新すると、それは起こりません。理論的には、すべてのアプリが再構築を必要とするため、すべてのアプリの再構築がトリガーされるはずですが、そうではないようです.

tools.js で何かを変更した場合は、各アプリに移動してファイルを再保存し、再構築して行った変更を取得する必要があります。

Watchify は親フォルダーではなくサブフォルダーのみを見ていますか、それともここで何か他のことが起こっている可能性がありますか?

私は npm スクリプト (以下の npm ファイルを参照) を使用してファイルの変更を監視しwatchify、コンパイルしてコンパイル後に通知します。ただし、watchify タスクが実行され (最初の実行時に 40 秒かかります)、notify:jsタスクがすぐに呼び出されます。notify:jswatchify のコンパイルが終了した後に呼び出されるようにしたいと思います。

次のコマンドのバリエーションを試しました。

|上記のコマンドは、演算子と同じことを行います。

&上記のコマンドは、演算子と同じことを行います。

私が達成しようとしていることについて、 watchifyのドキュメントにオプションがありません。ここで何かが欠けていますか、それとも私がこれをやろうとしている方法では不可能ですか?

watchify と gulp.watch の間の奇妙な相互作用で問題が発生しました。vagrant 環境で実行するために必要なポーリングで watchify を使用すると、gulp.watch タスクはファイルが最初に変更されたときにのみ起動します。

gulp ファイル:

サンプル リポジトリはこちら: https://github.com/mudetroit/watchify-gulp-watch-issue

最初のコンパイル後に gulp を実行してファイルを 2 回変更すると、次のように表示されます。

注目に値する項目がいくつかあります。watchify を使用せずに完全な再コンパイルを行うと、問題なく動作しますが、これは実際に役立つには時間がかかります。ポーリングをオフにすると正常に動作しますが、NFS を使用する vagrant 環境で動作しなくなります。午前中ずっとここで何が起こっているのかを理解しようとしていて、どこにも行けないので、助けが得られることを願っています.

次の npm ビルド ツールの組み合わせを使用してブラウザー アプリケーションを開発しています。

• ブラウザ化
• Coffeeify
• 見る

私のpackage.jsonファイルのスクリプト部分は次のとおりです。

これまでのところ、作業を開始する前に「npm run watch」コマンドを入力すると、更新するたびにすべての CoffeeScript ファイルが bundle.js ファイルに自動的にバンドルされるようにプロジェクトを構成しました。さらに、いくつかの .SCSS ファイルが必要です。これらのファイルは自動的に .CSS ファイルにコンパイルされ、すべてがバンドルされて min.css ファイルに縮小されます。そして、理想的には、CS ファイルに対して既に入力しているコマンド (「npm run watch」) 以外のコマンドを入力することなく、これを達成したいと考えています。

ここに私のpackage.json devDependenciesがあります:

これまでのところ、PhpStorm のファイル ウォッチャーと node-sass npm モジュールを使用して、.SCSS ファイルを .CSS ファイルに正常にコンパイルできるところまで来ました。いくつか読んだ後、yui コンプレッサーを使用することにしました (上記のように、Node モジュールとしてもインストールされています)。しかし、何度も検索した結果、これを行う方法の適切な説明が見つかりませんでした。

次を更新する必要がありますか？

私のpackage.jsonファイルの行？もしそうなら、どのように？

SCSS フォルダーのファイルが変更されるたびに、他のフォルダーの min.css ファイルが自動的に再コンパイルされるような最終結果が必要です。

(私の目的により良いオプションがあれば、必ずしも yui コンプレッサーを使用することを主張しているわけではありません。)

私は大きなWebアプリケーションに取り組んでいます。私は Gulp を使用して JavaScript ファイルと Browserify をビルドしています。

問題は、私が開発モードにいるとき、変更を加えるたびに (watch を使用して) JavaScript バンドルを再構築するのに非常に時間がかかることです。

私のアプリケーションでは、すべての JavaScript ファイルを特別な順序で 1 つのファイルにパッケージ化する必要があります。

• すべてのベンダー ファイル (ブートストラップ jquery などを含む)
• ブラウザ化する必要があるいくつかのファイル (commonJS スタイルを使用 require('...');)
• ブラウザ化とバベル化が必要ないくつかのファイル (.jsxファイル)

browserify がすべてのファイルをバンドルするのを待ってファイルを保存する間に時間を無駄にしたくないので (平均 20 ～ 25 秒...)、非同期に構築された 3 つのバンドルでフローを分割し、その 3 つの一時的なバンドルすべてをマージすることにしました。 1つに。(この方法では、最初のビルドに 15 秒しかかからず、watchify でファイルに 1 つの変更を加えると、再ビルドに 20 秒ではなく 2 秒しかかかりません)。

私の問題は、最終ファイルをバンドルするために 1 つのパイプのみを使用し、browserify とdebug: trueオプションを使用していたとき、生成された sourcemap ファイルが 1 つしかなかったため、browserify デバッグ オプションのおかげで、chrome 開発者コンソールですべてのソース ファイルに個別にアクセスできたことです。 .

しかし、今では 3 つのパイプがあり、各パイプが独自のソースマップを作成し、gulp-sourcemaps プラグインとloadMaps: trueオプションを使用して最後の 3 つの一時バンドルをマージすると、Web ブラウザー コンソールでエラーが発生しました (そのため、アプリは動作しません)。debug: trueまた、browserify オプションをオフにすると、正しく動作しますが、各 JS ファイルの分離をデバッグできません。大きな10万行の最終ファイルしかありません...

誰かが正しいソースマップを持っているのを手伝ってくれませんか?

ここにスローされるエラーの種類があります

このエラーのため、すべての browserify バンドルによって生成されたソースマップをマージできません。

gulp、browserfiyを使用して複数のバンドルを出力し、babelとwatchifyの機能も使用したい. 複数のバンドルを生成できますが、babelとwatchifyの機能を使用するのは賢明ではありません.

これが私が複数のバンドルのために行ったことです

watchifyとbabelの機能を楽しむにはどうしたらいいですか？

パッケージのリンクは次のとおりです: https://www.npmjs.com/package/watchify どこかで使用法を見ました: 「watchify -o js/bundle.js -v -d js/app.js」。「-d」オプションの意味を知りたいです。ありがとうございました。

Browserifywithを使い始めたばかりで、 を使用しgulpた例に出くわしwatchifyました。

私が理解していないのは、gulp.watch代わりに使用しないのはなぜですか? と
はどう違いますか？watchifygulp.watch

これは非常に単純な質問のように思えますが、過去 3 時間かけて調査した結果、watchify を使用していない場合、新しいファイルを保存するたびに処理が遅くなる可能性があることがわかりました。

これは私のディレクトリツリーです:

要件。フォルダー内のファイルを作成または保存するたびに、toBundleTheseJs/このファイルを再バンドルしたいtoBundleJsHere/

ファイルに何を含める必要がありpackage.jsonますか?

そして、gulp ファイルに書き込む必要がある最小値は何ですか?

これは可能な限り高速である必要があるため、browserify と watchify を使用する必要があると思います。最小限の手順を理解したいので、jspm のようなパッケージ マネージャーを使用するのは、この点では過剰です。

ありがとう