ツール

lit-htmlは、npmで入手できます。プロジェクトですでにnpmを使用している場合は、他のJavaScriptライブラリと同じようにlit-htmlを使用できます。この文書では、既存のワークフローでlit-htmlを使うにあたって、その作業を簡単にする追加のツールやプラグインについて説明します。

lit-htmlはJavaScriptモジュールとして提供されています。プロジェクトでまだJavaScriptモジュールを使用していない場合は、開発と構築のワークフローに2、3のステップを追加する必要があります。

セットアップ

プロジェクトにlit-htmlを追加する最も簡単な方法は、npmからインストールすることです。

  1. 0から新しいプロジェクトを始めるなら、プロジェクトの作業ディレクトリで次のコマンドを実行してnpmを設定します:

     npm init
    

    聞かれるプロンプトに応じて、プロジェクトを設定してください。デフォルトでかまなわないならリターンキーを押していけます。

  2. lit-htmlをインストールしてください。

     npm i lit-html
    
  3. 既存のプロジェクトでフロントエンドの依存関係が多い場合は、重複したモジュールを減らすnpm dedupeコマンドを使ってもよいかもしれません:

    npm dedupe

開発

開発段階では、以下のようなツールが使いたくなるかもしれません:

IDEプラグイン

lit-htmlを使って開発するときに役立つかもしれないIDEプラグインがいくつかあります。特に、lit-htmlスタイルのテンプレートに対応したコードハイライト機能を使用することをお勧めします。加えて,最新のJavaScriptをサポートするESLintのようなリンターを使用することをお勧めします。

VSCodeプラグイン

TypeScriptプラグイン(SublimeとAtomで動作します)

他のプラグイン

awesome-lit-htmlリポジトリには他のIDEプラグインがリストされています。

リンタープラグイン

ESLintはlit-htmlコードのリンティングに推奨されています。以下のESLintプラグインを追加して、lit-htmlテンプレートのよくある間違いをチェックすることができます:

開発サーバ

lit-htmlはJavaScriptモジュールとしてパッケージされています。多くの開発者はnodeスタイルのモジュール形式を使ってインポートすることに慣れています。これはブラウザではまだサポートされていません。ブラウザで実行するには、これらのモジュール形式をブラウザ対応のモジュール形式に変換する必要があります。Polymerの開発サーバー(Polymer CLIの一部)はその変換を実行するので、開発中にビルドせずにプロジェクトをプレビューできます。もう1つの代替手段はOpen Web Components Dev Serverです。(owc-dev-server).

ビルドプロセスにwebpackを使っているのなら、webpack devサーバーを使うこともできます。

Polymer Dev Server

Polymer CLIのインストール:

npm i -g polymer-cli

開発サーバーの実行:

polymer serve

Polymer CLIは、Webコンポーネント、JavaScriptモジュール、およびその他の最新のWebプラットフォームの機能を使用してプロジェクトの開発、テスト、および構築を支援するように設計されています。lit-htmlを使うのに必ずしも必要はありませんが、いくつかの便利なユーティリティを提供しています。

Open Web Components開発サーバ

Open Web Componentsプロジェクトは、nodeスタイルのモジュールをブラウザスタイルのモジュールに再マッピングする処理を行う開発サーバーを提供しています。

インストールと使用方法については、open-wc websiteを参照してください。

テスト

lit-htmlはそれほどテストをするのに特別な要件はありません。テスト用の設定がすでにあって、JavaScriptモジュールがサポートされていれば問題なく動作するはずです。 (もしnodeスタイルのモジュール形式を使っていれば).

Webコンポーネントテスター(WCT) は、nodeスタイルのモジュール形式をサポートするエンドツーエンドのテスト環境です。 Mochaテストフレームワークと(オプションで)Chaiアサーションライブラリと連携します。プロジェクトにWCTを追加する方法は2つあります。:

その他に、Karmaテストランナーも使えます。Open Web Componentsの推奨事項には、テストを実行する前にwebpackにバンドルすることによってモジュールの依存関係を解決するKarmaのセットアップが含まれています。

ビルド

ビルドツールはコードをリリース可能な製品に仕上げます。その過程でビルドツールに求められるものは:

多くのビルドツールでこれを実現できます。現時点ではPolymer CLIまたはWebpackをお勧めします。

Polymer CLIには、最小限の設定でlit-htmlを処理できる一連のビルドツールが含まれています。

webpackは様々なプラグインが使える大規模なエコシステムを備えた強力な構築ツールです。Open Web Componentsプロジェクトでは、lit-htmlとLitElementに適したwebpackのデフォルト設定を提供します。

Rollupなどの他のツールも機能します。その他、独自のWebpack設定を作成している場合は、他のツールによるビルドに関してのセクションを参照してください。

Polymer CLIを使ってプロジェクトをビルドする

もともとPolymerライブラリと連動するように開発されたPolymer CLIですが、さまざまなプロジェクトのためのビルド作業を処理できます。WebpackやRollupほど柔軟で拡張性はありませんが、最小限の設定で済みます。

Polymer CLIを使用してプロジェクトをビルドするには、最初にPolymer CLIをインストールしてください:

npm i -g polymer-cli

プロジェクトのディレクトリにpolymer.jsonファイルを作成してください。簡単な例はこのようになります:

{
  "entrypoint": "index.html",
  "shell": "src/myapp.js",
  "sources": [
    "src/**.js",
    "manifest/**",
    "package.json"
  ],
  "extraDependencies": [
    "node_modules/@webcomponents/webcomponentsjs/bundles/**"
    ],
  "builds": [
    {"preset": "es6-bundled"}
  ]
}

この設定は、アプリが index.htmlというHTMLエントリポイントを持ち、​​src/myapp.jsというメインのJavaScriptファイル(アプリシェル)を持つことを指定しています。バンドルが実行されますが、ES5には変換されません。polymer.jsonの詳細については、Polymerライブラリサイトのpolymer.jsonの仕様を参照してください。

プロジェクトをビルドするには、プロジェクトのディレクトリで次のコマンドを実行します:

polymer build

Polymer CLIを使用したビルドの詳細については、Polymerライブラリのプロダクションへの構築を参照してください。

webpackを使ってプロジェクトをビルドする

Open Web Componentsを参照してください。デフォルトのWebpack構成はlit-htmlを使用するプロジェクトを構築するための優れたスタートポイントとなっています。webpackについて書かれたインストラクションを参照してください。

他のツールによるビルドに関して

webpack、Rollup、または他のツール用に独自の設定を作成する場合、いくつか考慮すべきポイントがあります:

ES5変換とモジュール変換

ビルドツールは、従来のブラウザ用にES6の機能をES5に変換する必要があります。

TypeScriptで作業している場合、TypeScriptコンパイラはブラウザごとに異なる出力を生成できます。

ビルドツールはJavaScriptモジュール(ESモジュールとも呼ばれる)を受け入れ、必要に応じてそれらをUMDなどの別のモジュール形式に変換する必要があります。nodeスタイルのモジュール形式を使用する場合、ビルド時にそれらをブラウザ対応のモジュール形式に変換する必要もあります。

テンプレートのミニファイ

ビルドプロセスの一環で、HTMLテンプレートをミニファイしたいと思うでしょう。ほとんどのHTMLミニファイツールは、lit-htmlで使用されているようにテンプレートリテラル内のHTMLをサポートしていません。そのため、lit-htmlテンプレートの縮小をサポートするビルドプラグインを使用する必要があります。lit-htmlテンプレートをミニファイすると、テンプレート内のノード数が減るため、パフォーマンスが向上します。