出力ターゲット

コンパイラのより強力な機能の1つは、コンポーネントが使用される方法に応じてさまざまなビルドを生成する機能です。 Stencilは、アプリのソースを取得して、httpサーバーにデプロイするWebアプリ、npmで配布するサードパーティコンポーネントの遅延読み込みライブラリ、またはVanillaJSのカスタムエレメントなど、多数のターゲットにコンパイルできます。デフォルトでは、Stecnilの出力ターゲットタイプは wwwであり、これはWebアプリに最適です。

出力ターゲットタイプ:

例:

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'dist'
    },
    {
      type: 'www'
    }
  ]
};

ディファレンシャルバンドリング

「差分バンドリング」をサポートするために、コンパイラーが多数のバンドルを自動的に生成することに注意することも重要です。これが意味するのは、本番ビルド中に、ステンシルは同じソースコードから最新のブラウザーとレガシーブラウザー（IE11）の両方のコードを生成するということです。ディファレンシャルバンドルの利点は、最新のブラウザーがすべてのポリフィルと肥大化したレガシーJavaScriptを回避し、ブラウザーに既に組み込まれている最新のAPIを使用できることです。

以下の例では、2つのスクリプトタグがありますが、ユーザーが要求するのはそのうちの1つだけです。 IE11ユーザーの場合、ES5構文ですべてのポリフィルを含むapp.jsファイルをダウンロードします。最新のブラウザを使用しているユーザーは、ESモジュール、動的インポート、非同期/待機、クラスなどの最新のJavaScript機能を使用する app.esm.jsファイルのみをダウンロードします。

注：IE11 ES5ファイルを生成するには、buildEs5をtrueに設定する必要があります

<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>

ドキュメントの自動生成

アプリがますます多くのコンポーネントで拡張され、チームのサイズとメンバーが時間の経過とともに調整され続けるにつれて、すべてのコンポーネントが適切に文書化され、文書自体が維持されることが重要です。ドキュメントの保守は、開発者がしなければならない最も面白くないことのいくつかとともにすぐそこにありますが、それはそれを簡単にすることができないという意味ではありません。

ビルドプロセス全体を通じて、コンパイラは各コンポーネントからドキュメントを抽出して、JSDocsコメント、コンポーネントの各メンバーのタイプ（TypeScriptに感謝）、CSS変数（CSSカスタムプロパティ）を含めることができます。

コンポーネントプロパティドキュメントの例：

@Propに説明を追加するには、前の行にコメントを追加するだけです。

/** (optional) 表示するアイコン */
@Prop() iconType = "";

CSSの例

Stencilは、cssまたはscssファイル内のjsdocスタイルのコメントを介してCSS変数を指定すると、CSS変数も文書化します。

 :root {
   /**
    * @prop --primary: プライマリヘッダーの色
    */
   --primary: blue;
 }

Back

Submit an edit

出力ターゲット