See how Stencil fits into the entire Ionic Ecosystem ->
Stencil is part of the Ionic Ecosystem ->

Distributionアウトプットターゲット

distタイプは、Ionicなどの自己遅延読み込みが可能な再利用可能なライブラリとしてコンポーネントを生成することです。 ディストリビューションを作成するときは、プロジェクトの package.jsonも更新する必要があります。 ただし、生成されたバンドルはツリーシェイク可能であるため、インポートされたコンポーネントのみがビルドに含まれるようになります。

outputTargets: [
  {
    type: 'dist'
  }
]

これは「dist-custom-elements-bundle」出力ターゲットとどのように異なりますか?

まず、Stencilは、コンポーネントが実際にページで使用された場合にのみ、それ自体を遅延ロードするように設計されました。このアプローチには多くの利点があります。たとえば、任意のページにスクリプトタグを追加するだけで、ライブラリ全体を使用できますが、実際に使用されるコンポーネントのみがダウンロードされます。たとえば、@ionic/coreには100を超えるコンポーネントが付属していますが、1つのWebページに必要なのはion-toggleだけです。コンポーネントライブラリ全体をリクエストしたり、 ion-toggleだけのカスタムバンドルを生成したりする代わりに、dist出力ターゲットは、そのコンポーネントをオンデマンドでロードする準備ができた小さなエントリビルドを生成できます。

一方、 dist-custom-elements-bundleは、遅延読み込みを行わずに、HTMLElementを拡張するカスタム要素を直接ビルドしたものです。カスタム要素バンドルは、ポリフィルを適用せず、各カスタム要素を自動的に定義しません。これは、カスタム要素自体のバンドル、遅延読み込み、および定義を処理するプロジェクトに適している場合があります。

幸い、両方のビルドを同時に生成して、同じディストリビューションで出荷することができます。使用するビルドを決定するのは、コンポーネントライブラリの利用者次第です。

Config

プロパティ 説明 デフォルト値
dir dir設定は、パブリック配布ディレクトリを指定します。このディレクトリは通常、npmパッケージ内にある distディレクトリです。このディレクトリは、ソースファイルから直接ビルドおよび再ビルドされます。さらに、これはビルドターゲットであるため、ビルドのたびにすべてのファイルが削除および再ビルドされるため、常にソースファイルをこのディレクトリにコピーすることをお勧めします。このディレクトリはリポジトリにコミットしないことをお勧めします。 dist
empty デフォルトでは、各ビルドの前に、 dirディレクトリからすべてのファイルが空になります。ただし、このディレクトリが空にならないようにするには、この値を「false」に変更します。 true

公開

次に、ライブラリをNode Package Manager(NPM)に公開できます。 package.jsonファイルの設定と公開の詳細については、コンポーネントライブラリをNPMに公開するを参照してください。

配布オプション

各出力ターゲット、バンドルの形式、および配布には、それぞれ独自の長所と短所があります。 幸いなことに、コンポーネントの適切なソースコードの記述について心配することができます。ステンシルはさまざまなバンドルの生成を処理し、ライブラリの利用者はコンポーネントを外部プロジェクトに適用する方法を決定できます。 以下はいくつかのオプションです。

スクリプトタグ

  • 公開されたNPMモジュールのCDNコピーにリンクされたスクリプトタグを使用します。例: <script type="module" src='https://cdn.jsdelivr.net/npm/my-name@0.0.1/dist/myname.js'></script>
  • 最初のスクリプト自体は非常に小さく、ライブラリ全体を表すわけではなく、小さなレジストリにすぎません。
  • ライブラリ内の任意またはすべてのコンポーネントを、そのWebページ内のどこでも使用できます。
  • 実際のコンポーネントがHTML内で記述されているか、バニラJavaScript、jQuery、Reactなどで作成されているかは関係ありません。
  • そのページで使用されているコンポーネントのみが実際にリクエストされ、遅延読み込みされます。

バンドラーを使用して distライブラリをインポートする

-npm install my-name--saveを実行します

  • ルートコンポーネント内に importを追加します:import my-component;
  • Stencilは、Stencilライブラリの遅延読み込み機能を自動的にセットアップします。
  • 次に、テンプレート、JSX、htmlなどの任意の場所で要素を使用できます。

distライブラリを別のステンシルアプリにインポートします

-npm install my-name--saveを実行します

  • ルートコンポーネント内に importを追加します:import my-component;
  • Stencilは、Stencilライブラリの遅延読み込み機能を自動的にセットアップします。
  • 次に、テンプレート、JSX、htmlなどの任意の場所で要素を使用できます。
BackNext
Contributors