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

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

outputTargets: [
  {
    type: 'dist'
  }
]

dist-custom-elements-bundle "の出力先とどう違うのですか？

Stencil v2.12.0 において dist-custom-elements-bundle 出力ターゲットは非推奨となり、代わりに dist-custom-elements 出力ターゲットが推奨されます。以下の情報は、歴史的な目的のみに使用されます。

まず、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`

公開された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などで作成されているかは関係ありません。
そのページで使用されているコンポーネントのみが実際にリクエストされ、遅延読み込みされます。