問題タブ [tsify]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
typescript - Browserify + Watchify + Tsify + Gulp のパフォーマンスの問題
私は、jQuery、React、およびSocketIOに依存する「中規模の」Typescriptアプリケーション(自明ではありませんが、エンタープライズレベルでもなく、数千行のように)を持っています-他の小さなライブラリの中でも。
私の現在のgulpfileはこれです:
すべてが期待どおりに機能しますが、watch タスクを使用するときのビルド時間は数秒かかります。奇妙なことに、スクリプトの再コンパイルが 500 ミリ秒 (「時間」イベントのイベント ハンドラー) 未満で発生したとタスクが報告しているのに、頭の中でカウントすると、3 ~ 4 秒後まで完了しません。 .
既存の TypeScript コードを貼り付ける前に、jQuery、React、Moment、および使用していたその他のライブラリをすばやくロード/バンドルしていたことに注意してください。このため、別のベンダー バンドルを使用しても速度が向上するとは思いません。また、ソースマップを書き出さなくてもパフォーマンスに影響はないようです。
browserify に切り替える前は、コンパイルに gulp-typescript を使用し、モジュールのロードに requirejs を使用していました。これらのビルドには 1 秒もかかりませんでした。ただし、requirejs は他の理由で問題を引き起こしていました。いずれにせよ、AMD から CommonJS に移行したいと考えています。
今のところ大きな懸念事項ではありませんが、プロジェクトが大きくなるにつれて、開発フローに問題が生じる可能性があります。これだけの規模のプロジェクトでは、これよりも大きなプロジェクトを処理するのにどれくらいの時間がかかりますか?
さらに、Visual Studio でも問題が発生しています。これは ASP.NET 5 アプリケーションであり、Visual Studioはバンドルされた JavaScript ファイルが変更されるたびに再ロード/再解析を要求しているようで、変更のたびに IDE で 1 ~ 2 秒の遅延が発生します。再コンパイル自体には 3 ~ 4 秒かかります。スクリプトは wwwroot フォルダーにレンダリングされており、ASP.NET 5 ツールを使用してスクリプト サブフォルダーを "除外" する方法はないようです。
私はどこかで何かが欠けていることを知っています。考えられる問題は、tsify が typescript の「プロジェクト」機能を使用してリロードを実装していないため、TypeScript コンパイラが変更ごとに各ファイルを再処理することです。
とにかく、おもちゃのプロジェクトを超えてこれらのツールを使用したのは私だけではないので、より良い解決策があるかどうかをここで尋ねています。この問題を除けば、すべてが非常にうまく機能しているためです。
編集 - - - - - - - - - - - - - - - -
わかりました、自分の言葉を食べなければなりません。サードパーティのライブラリを独自のバンドルにバンドルしているため、ビルドは約 1 秒に短縮されています。これが更新された gulpfile です (新しい dev.scripts.vendor タスクと buildScripts 関数の .external 呼び出しに注意してください)
しかし、私はまだ奇妙な問題を抱えています。ソースマップを無効にすると (現在は速度に影響があるようです)、 on("time", () => {}) コールバックはファイル変更ごとに 60 ~ 80 ミリ秒を報告していますが、それでも約 1 秒間ハングします。 . これを待つのは 1 秒程度なので、プロジェクトが大きくなるにつれて、この待ち時間も長くなる可能性があるのではないかと心配しています。
イベントがはるかに小さなものを報告しているときに、この追加の 1 秒が何に費やされているかを確認するのは興味深いことです。おそらく、誰もすぐに答えを持っていないように見えるので、ソースを少し掘り下げ始めます。
別の問題これは単なる補足ですが、 debowerifyはこれで機能しなくなりました。debowerify+bower を使用すると、そのモジュールが「外部」リストにリストされている場合でも、最終出力で必要なモジュールをレンダリングし続けます。したがって、現在この設定では、アプリ バンドルにコンパイル時間を追加しても問題ない場合を除き、npm モジュールしか使用できません。
また、debowerify は npm モジュールをオーバーライドし、bower 構成ファイルではなく、bower_components のディレクトリ リストに基づいていることを知りました。jQuery を npm にインストールし、Bower でのみブートストラップしました。しかし、ブートストラップが依存関係として jQuery をプルダウンしたため、bower jQuery モジュールが NPM jQuery よりも優先的に読み込まれていました。人々のために頭を上げてください。
regex - VS コードでこの problemMatcher が機能しないのはなぜですか?
なぜ問題マッチャーが機能しないのですか? 正規表現についてはかなり確信していますが、stdout にいくつか問題があっても、問題は報告されていません...
javascript - browserifyを使用してnode_modulesからtypescriptモジュールをロードするにはどうすればよいですか?
を実行するtsc
と、すべてが完全に正常に実行されます。ただし、ノード モジュールから他の typescript モジュールをインポートする方法を理解できません。
これは、gulp ファイルの重要な部分です。
使うときは、
tsmvc
typescriptモジュールノードモジュールはどこですかcannot find module tsmvc.
.Atomは文句を言わず、インテリセンスを表示します.tscは文句を言いませんが、tsifyは文句を言います. 誰かが似たようなことをしているgulpファイルを指摘したり、プロセスを説明したりできますか?
github リポジトリは次のとおりです: https://github.com/Davste93/typescript-mvc-consumer/blob/master/gulpfile.js
typescript - 静的プロパティの継承が期待どおりに機能しない
私はこのようなものを持っています。
TestBase.ts
テスト
SomeOtherClass.ts
myValue
私の IDE はで利用できることを示唆してTest
いますが、実行時には の値が反映されませんTestBase.myValue
。静的プロパティの継承が許可されていることを IDE が誤って示唆していますか、それとも browserify/tsify が何かを壊していますか?
typescript - gulp browserifyでjavascriptとtypescriptを混在させる
私は、javascript と今は typescript のための素敵な gulp browserify ワークフローを持っています。これらは、ソース ファイルをモジュールと結合し、ブラウザーで使用する単一の .js ファイルを生成します。
ただし、古い javascript プロジェクトがあるため、すべてを typescript に変換することなく、typescript を使用して新しい機能を導入したいと考えました。
理想的には、browserify で ts と tsx を検出してプリコンパイルし、ブラウザー化する前に js ファイルと共に結果を babel に渡します。
このセットアップは実際にコンパイルされ、js 部分で機能しますが、私の typescript ファイルはバンドルされていません。 この方法で typescript ファイルを既存の javascript プロジェクトに追加することは可能ですか?
注: 現時点では React tsx ファイルを追加していますが、通常の ts ファイルの場合も同様であると想定しています。
注: 私は手動で tsx ファイルを browserify バンドルに "add()" しようとしましたが、高い期待や結果はありませんでした。
注: tsx はコンパイルされますが、少なくともエラーでビルドに失敗します。バンドルには含まれていません。