@david による編集：Discourse のテーマシステムには、複数の JS ファイル をサポートする機能が標準で搭載されるようになりました。この webpack 方式はもはや必要ありません。
こんにちは！handsfree-discourse コンポーネントを開発している際、ファイル管理に関するいくつかの問題に直面しました。主な問題は、コードを複数のファイルに分割する方法が必要だったことです。もう一つの課題は、管理者に CORS の有効化を求めたり、追加の HTTP リクエストを発生させたりすることなく、サードパーティのライブラリを含める必要があったことです。
これらの問題を解決するために、JS を多用するコンポーネントを素早く構築するためのボイラープレートである discourse-webpack を作成しました。主な機能は以下の通りです：
- リロード機能付きのローカル開発サーバー
- ソースコードとコンパイル済みコードを別々のブランチに保つためのコミットスクリプト！
このトピックの残りの部分では、その使用方法と仕組みについて説明します。私は最近、他のいくつかのコンポーネントのテストを完了したばかりですので、何か問題が発生したり、具体的な要望があればお気軽にお知らせください！
Discourse コミュニティ向けに JavaScript を多用するコンポーネントを素早く構築できます。ソースコードとビルド済みコードを別々のブランチに保つためのコミットスクリプトも完備しており、高速なリリースをサポートします！
インストール
まず、ローカルマシンに NodeJS >= 8 と git がインストールされていることを確認してください。その後、以下の各行を入力してください：
# リポジトリをダウンロード
git clone https://github.com/browsehandsfree/discourse-webpack
# ディレクトリに移動
cd discourse-webpack
# 依存関係をインストール
npm install
次に、package.json の以下の項目を編集し、すべてのリンクを yours に置き換える必要があります。具体的には：
{
name: 'your-project',
repository: {
url: 'git+https://github.com/username/repo'
},
author: '',
bugs: {
url: 'https://github.com/username/repo/issues'
},
homepage: 'https://example.com'
}
最も重要なのは、repository.url が正しく、git+ で始まっていることを確認することです。npm run discourse を実行すると、そのリポジトリにコミットされ、プッシュされます。
また、/src/discourse/about.json にある Discourse の about.json を設定することを忘れないでください。
開発
npm install を実行すると、以下のディレクトリ構造が作成されます：
discourse-webpack
|- node_modules/ # 依存関係
|- src/ # メインのソースファイル
|--|- discourse/ # Discourse テーマファイル
|--|--|- common/
|--|--|- desktop/
|--|--|- mobile/
|--|- main.css # メインのスタイルシート
|--|- main.js # メインの JavaScript エントリーポイント
|--|- sandbox.html # ローカル開発用のサンドボックス
|- .gitignore
|- discourse-push.js # 特別なコミットスクリプト
|- README.md
|- webpack.config.js # Webpack 設定
|- yarn.lock
コマンドラインスクリプト
さらに、プロジェクトのルートから以下のコマンドを使用できます：
# localhost:8080 で開発サーバーを起動
# - リライブロードをサポート
# - ローカルでのデバッグを助けるために `/src/sandbox.html` を使用
npm run dev
# コンポーネントを `/dist` にコンパイル
npm run build
# コンポーネントを `/dist` にコンパイル
# - その後、`/dist` を `discourse` ブランチにコミット
npm run discourse
仕組み
リポジトリをダウンロードし、依存関係をインストールしたら、開発を開始する準備が整いました！npm run dev を使用して、localhost:8080 でライブリロードサーバーを起動してください。
その URL にアクセスすると、/src/sandbox.html にある HTML ファイルが読み込まれます。このファイルは実際には Discourse 内で使用されるものではなく、Discourse のコンテキスト外でスクリプトをローカルで開発するために用意されています。
メインの webpack エントリーポイントは /src/main.js です。そこから他のスクリプトを import でき、webpack がすべてをバンドルして以下のファイルに注入します：
/src/sandbox.html/src/discourse/common/body_tag.html
main.js は自動的にコンパイルされ sandbox.html に注入されますが、以下のコードのため、body_tag.html にはインラインで手動注入されます：
<script>
<%= compilation.assets['main.js'].source() %>
</script>
もしスクリプトを after_header.html などの別のテンプレートに注入したい場合は、その script タグをそのテンプレートにコピーするだけです。これにより、開発中は HTML と JavaScript を分離したままにしながら、デプロイ時には結合された状態に保つことができます！
コンパイル
npm run build でコンパイルすると、以下の処理が行われます：
- まず、
/src/main.jsと依存関係がバンドルされます - 次に、
/src/discourse/内のすべてのファイルが/dist/にコピーされます - 同時に、
main.jsが以下の条件を満たすテンプレートファイルにインラインで注入されます：
<script>
<%= compilation.assets['main.js'].source() %>
</script>
デプロイ
npm run discourse を実行すると、/discourse-push.js スクリプトが呼び出され、以下の処理を行います：
- まず、
npm run buildと同様にコンパイルします - 次に、
/dist内に新しい git リポジトリを初期化します - その後、
/distをプロジェクトのdiscourseブランチにコミットします（ブランチが存在しない場合は作成されます）
discourse ブランチの使用
以下の各
/relative/urls/は、フォーラムのベース URL からの相対パスです。例：https://example.com/relative/urls/
コンポーネントのインストール
/admin/customize/themes にアクセスし、プロジェクトのリポジトリから「Web からインポート」を選択してコンポーネントをインストールします。例：https://github.com/my-awesome/discourse-component。
その後、ブランチを discourse に設定してください。master のままにすると、Discourse がコンパイルされていないファイルを読み込もうとするため（動作する場合でも）、動作しません。
独自のホストでテーマ固有のファイルをデバッグする
- Discourse Theme CLI をインストール
- https://theme-creator.discourse.org にログイン
- このディレクトリに CD して、
discourse_theme watch .を実行 - ベース URL として
https://theme-creator.discourse.orgを使用theme-creatorから取得した API キーを使用
Discourse が初めてで、このプロジェクトをフォークしたい場合は、以下の記事が役立つかもしれません。