プラグイン開発のためのホットリロード?

みなさん、こんにちは。もし既に対応済みの内容であればお詫び申し上げます(見つけられませんでした)。

ローカル環境で Discourse プラグインを開発すると、どうしても動作が遅くなりがちです。ローカルで動作中のアプリをリロードしてコードの変更を確認するだけで、5 秒以上かかってしまいます。HTML/HBS ファイルや JS ファイルで変更を加え、保存した後、アプリをリロード([編集: ブラウザをリフレッシュ])し、変更を確認するためにさらに 5 秒以上待つ必要があります。

ローカルでの Discourse プラグイン開発において、ホットリロード(ローカル表示の自動更新)を行う方法はありますか?

CSS ファイルは自動的に更新されるようですが、HTML/HBS ファイルや JS ファイルはそうではないようです。

何か手がかりがあるか見守っていますが、それが現状なのだと思います。私が目にしたところでは、Macの方がはるかにひどいです。

「いいね!」 2

みなさん、こんにちは。

API(つまり Ruby on Rails のコード)が変更された場合のみ、サーバーを再起動する必要があります。これは比較的自信を持って言えます。

JavaScript や HBS ファイルのみを変更した場合は、ブラウザをリフレッシュするだけで変更を反映できます。

CSS ファイルの変更に至っては、それすら不要です!:slight_smile:

「いいね!」 3

ここではブラウザの再読み込みについて、またその再読み込みを避けるためのホットリロードの利用可否についてお話ししています。変更を反映させるためにブラウザを再読み込みする際に5秒以上かかることが問題です。

例えば plugin.rb を変更した場合のように、サーバーを停止して再読み込みする必要があれば、それは約60秒を要します。

ホットリロードは、現在多くの技術における開発の標準となっています(特に Angular に慣れています)。開発においては非常に優れています。Rails では webpack を通じて可能だと聞いていますが、確信はありません。Discourse の開発ではホットリロードは利用できないと感じていますが、もし可能であれば素晴らしいので確認したかったです。

ブラウザを再読み込みして、更新された JavaScript ファイルを読み込む必要があります。

「いいね!」 2

これは、EmberCLI: Coming to a Discourse near you! で公開される予定です。

「いいね!」 8

実際、現在、マスター版の Discourse と Ember CLI を併用することで、この動作を実現できます!

「いいね!」 6

それは素晴らしいですね、ありがとうございます。これをローカル開発で使う場合、GitHubからDiscourseの最新バージョンを自分のコンピュータにダウンロードする以外に何か必要なことはありますか?

「いいね!」 1

最新の Discourse を確認し、以下のように操作してください。

  1. API サーバーを起動: rails s

  2. Ember サーバーを起動:

    1. 適切なフォルダに移動 cd app/assets/javascript/discourse
    2. パッケージをインストール yarn
    3. Ember CLI を実行: ember serve --proxy "http://localhost:3000"

これで http://localhost:4200 を開くと、Ember CLI でホットリロード付きで動作しているはずです。

「いいね!」 8

ローカルの Discourse インスタンスをアップグレードできることを楽しみにしていましたが、現在は 2.8 をローカルで実行しています。しかし、HTML や JS の変更に対するホットリロードがまだ機能しません。

私の実行手順は以下の通りです:

ローカルの Discourse フォルダに移動

$ redis-server // サーバーを起動

$ rails s // Rails アプリを起動

$ yarn // 初回のみ実行する必要があると思われます

$ bin/ember-cli // Ember CLI を起動。なぜか ember serve --proxy "http://localhost:3000" コマンドではエラーが発生しました

これでアプリが localhost:4200 で正常に実行されます。

ローカルの Discourse インスタンスにプラグインを追加しましたが、localhost:4200 で正しく表示されています。ただし、HTML や JS ファイルを変更しても、ブラウザをリフレッシュしない限り、ローカルで実行中のアプリには変更が反映されません。

ホットリロードを機能させるために、他に何か行う必要があるでしょうか?

「いいね!」 2

こんにちは。Discourse で ember-cli を使用する場合、ホットリロードは利用可能ですか?以前投稿した際と同じ問題がまだ発生しています。その手順に従っても、ホットリロードが機能しません(つまり、HTML や JavaScript の変更を確認するためにまだブラウザをリフレッシュする必要があり、ファイルを変更して保存した後にターミナルに表示される ember-cli の出力が反応していないようです)。

Hot Reload が依然として私の環境では機能しません。これらの手順以外に何か必要なことはありますか?

私が行うことは、

./bin/rails s

を一つのシェルで実行し、

./bin/ember_cli

を別のシェルで実行することです。

はい、ありがとうございます。私も同様に行っています。HTML や JS ファイルのホット(つまり自動)リロードは機能していますか?

hbs ファイルのことですか?

はい、ブラウザでの「liveReload」がなぜ機能しないのか理解できません。画像では表示されていますが:

image

また、以下のスクリプトも存在しています:

<script type="text/javascript" src="http://localhost:4200/_lr/livereload.js?port=4200&amp;host=localhost&amp;path=_lr/livereload"></script>

および

<script src="/ember-cli-live-reload.js" type="text/javascript"></script>

はい、HBS ファイルのことです。

ライブリロード(特に JavaScript ファイル用)が利用できるようになると大変助かります。他の開発環境ではライブリロードが標準で、これがあることでコーディングが格段に速くなり、より楽しくなります。

「いいね!」 1

追加情報:

ember-cli/ember-cli-inject-live-reload: HTML コンテンツにライブリロードスクリプトを注入する Ember CLI プラグイン (github.com)

livereload.js は、Ember CLI への WebSocket 接続を開始します。これにより、JavaScript またはスタイルの変更後にブラウザをリフレッシュするよう、Ember CLI がブラウザに通知できます。」

なぜブラウザがこの機能を無視するのか気になります。ブラウザのサイトセキュリティに関連するオプションが原因なのでしょうか?

確実ではありませんが、他のコンテキストや他のフレームワークでは、ブラウザでライブリロードが機能した経験があります。(Emberについてはわかりません。Discourse関連のコーディングでの使用経験しかないためです。)

ライブリロードが期待される機能かどうか知りたいです。以前の議論からすると、おそらく「はい」のようです。もしそうなら、Discourseチームもライブリロードを使っているのか、そして彼らが私とは異なる何らかの処理を行っているのか気になります。

「いいね!」 1

スクリプトの存在は明らかに意図の表れであり、ここで偶然が起きているとは考えられません。

したがって、これはローカルブラウザの設定の問題か、あるいは他の設定の問題ではないかと疑問に思っています。

livereload.js についてさらに詳しく: livereload/livereload-js: サーバーと通信し、リロードを実装する LiveReload JavaScript コード (github.com)

livereload がどの程度機能すべきか、またクライアント側の CSS 以上の範囲を含むかどうかについて、公式の見解が得られると大変喜ばしいことです。

「いいね!」 1

ページのリフレッシュは自動的に ember CLI が処理します。現時点では、テーマおよびプラグインのアセットは Rails アプリによってコンパイルされ提供されるため、Ember CLI によって処理されません。そのため、テーマやプラグインの変更が自動的にページをリフレッシュすることはありません。

これは将来的に改善できる可能性がありますが、現状では想定された動作です。

「いいね!」 5