# 統合

以下のパッケージは、異なる環境でHandlebarsを統合します。これらのパッケージは、Handlebarsチームによって**公式にサポートされていません**。

Webpack環境でHandlebarsを使用できる複数のWebpackプラグインがあります。

# Webpack: handlebars-loader

handlebars-loader (新しいウィンドウで開きます) を使用すると、プリコンパイル済みテンプレートをインポートできます。Handlebarsテンプレートを`template.handlebars`ファイルに記述し、以下を使用してインポートします。

const compiledTemplate = require("./template.handlebars");

または

import compiledTemplate from "./template.handlebars";

handlebars-webpack-plugin (新しいウィンドウで開きます) は、アプリケーションのコンパイル時にHandlebarsを使用してHTMLページを静的に構築します。

html-bundler-webpack-plugin (新しいウィンドウで開きます) は、Handlebarsを含む (新しいウィンドウで開きます)様々なテンプレートエンジンを使用して、テンプレートをレンダリングし、生成されたHTMLにスタイルとスクリプトをバンドルします。

babel-plugin-handlebars-inline-precompile (新しいウィンドウで開きます) は、JavaScriptソースコードでテンプレートリテラルとして提供されるHandlebarsテンプレートをプリコンパイルします。

import hbs from "handlebars-inline-precompile";
const compiledTemplate = hbs`{{name}}`;

セットアップ手順については、パッケージのドキュメントを参照してください。

hbsfy (新しいウィンドウで開きます) パッケージを使用すると、browserify環境でプリコンパイル済みテンプレートをインポートできます。

const compiledTemplate = require("./template.handlebars");

Parcel用の古いプラグインがあります: https://www.npmjs.com/package/parcel-plugin-handlebars

しかし、より最新バージョンの、このパッケージの多くのフォークのいずれかを使用する必要があります: https://www.npmjs.com/search?q=parcel-plugin-handlebars

最新のものはこれです: https://www.npmjs.com/package/@inventory/parcel-plugin-handlebars

TODO: ここにテキストを入力

https://www.npmjs.com/package/parcel-plugin-handlebars-precompile