Stencil Config

Stencilでは、すぐに使えるデフォルトの値が設定されているため、多くの場合でstencil.config.tsファイルをカスタマイズする必要はありません。基本的に、設定をできるだけ最小限に抑えることをお勧めします。実際に、stencil.config.tsファイルを削除してもアプリは問題なくコンパイルされます。ですがそれと同時に、この設定を使用してコンパイラを最小限で構成できます。以降は、たくさんある任意の設定プロパティです。

stencil.config.tsの例:

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

export const config: Config = {
  namespace: 'MyApp',
  srcDir: 'src'
};

buildEs5

ES5ビルドを生成するかどうかを設定します。デフォルトは falseです。 trueを設定すると、devモードとprodモードの両方のes5ビルドも作成されます。 buildEs5をprodに設定すると、ES5はprodモードでのみビルドされます。基本的に、アプリをレガシーブラウザー（IE11およびEdge 18以下）で実行する必要がない場合は、デフォルトの buildEs5をfalseに設定して使用しても安全です。これにより、本番ビルドの時間も短縮されます。 es5ビルドの作成に加えて、アプリはsupportレガシーブラウザーのランタイムオプションを有効にすることにも関心がある場合があります。詳細については、 config extras を参照してください。

buildEs5: boolean | 'prod'

bundles

Stencilはデフォルトでアプリケーションを静的に分析し、すべてのコンポーネントがどのように相互接続されているかを示すコンポーネントグラフを生成します。コンポーネントグラフから、アプリ内での相互の使用状況に応じて、コンポーネントをどのようにグループ化するかを最適に判断できます。そうすることで、ネットワークへのリクエストを減らすためにコンポーネントをバンドルすることができます。バンドルはbundlesを使用して手動で生成することもできます。

bundlesは、コンポーネントが遅延ロードされたバンドルにグループ化される方法を表すオブジェクトの配列です。Stencilがバックグラウンドで自動的に処理するため、この構成はほとんど必要ありません。

bundles: [
  { components: ['ion-button'] },
  { components: ['ion-card', 'ion-card-header'] }
]

enableCache

デフォルト: true

Stencilは再ビルドを高速化するために、ビルド結果をキャッシュします。この機能を無効にするには、enableCacheをfalseに設定します。

enableCache: true

globalScript

global scriptは、ライブラリやアプリが読み込まれる前に1回実行されるため、外部サービスへの接続の設定や、使用しているライブラリのビルドなどを行うことができます。

実行されるコードは、global scriptによってエクスポートされるデフォルトの関数内に配置する必要があります。global scriptのすべてのコードが、エクスポートされる関数でラップされていることを確認してください。

global scriptのオプションは、ファイルパスを文字列として受け取ります。

export default function() { // または export default async function()
  initServerConnection();
}

エクスポートされた関数はasyncにすることもできます。

globalStyle

Stencilは、多くのコンポーネントをアプリにコンパイルするために伝統的に使用されており、各コンポーネントには独自のコンパートメント化されたスタイルが付属しています。ただし、すべてのコンポーネントとWebサイトで"グローバル"なスタイルを使用することは今でも一般的です。グローバルCSSファイルは、CSS Variablesを定義するのに役立ちます。

さらに、globalStyleはSassやPostCSSなどでスタイルをプリコンパイルできます。

次は、app.cssという名前のグローバルcssファイルを含むフォルダー構造の例です。

src/
  components/
  global/
    app.css

global styleは、ファイルパスを文字列で設定します。このビルドによる出力は、buildDirに送られます。次の例では、www/build/app.cssに保存されます。

globalStyle: 'src/global/app.css'

アプリでグローバルスタイルを使用する方法については、styling docsをご覧ください。

invisiblePrehydration

default: true

When true, invisiblePrehydration will use Ionic's opinion to visually hide components before they are hydrated by adding an automatically injected style tag to the document's head. Setting invisiblePrehydration to false will not inject the style tag into the head, allowing you to style your web components pre-hydration. Please note that setting invisiblePrehydration to false will cause everything to be visible when your page is loaded, causing more prominent Flash of Unstyled Content (FOUC), however you can style your web component's fallback content to your preference.

invisiblePrehydration: true

hashFileNames

デフォルト: true

productionビルドでは、生成された各ファイルのコンテンツはハッシュ化され、ハッシュ化された値がファイル名として使用されます。コンテンツがビルド間で更新されない場合、同じファイル名を受け取ります。コンテンツが更新されると、ファイル名が異なります。これにより、デプロイされたアプリはビルドディレクトリを"永続的にキャッシュ"し、Content Delivery Network（CDN）を最大限に活用して大量のファイルをキャッシュすることで、高速なアプリを実現できます。

hashFileNames: true

hashedFileNameLength

デフォルト: 8

hashedFileNameLengthはファイル名のハッシュが何文字であるべきかを指定します。hashFileNamesがtrueに設定されていて、productionビルドの時のみ有効です。

hashedFileNameLength: 8

namespace

デフォルト: App

namespaceはアプリの名前空間を表すstringを指定します。再利用可能なコンポーネントのライブラリになることを意図していないアプリの場合、デフォルトのAppで十分です。ただし、アプリがIonicなどのサードパーティライブラリとして使用される場合は、一意の名前空間が必要です。

namespace: "Ionic"

outputTargets

Output Target docsをご覧ください。

plugins

Plugin docsをご覧ください。

devServer

Dev-Server docsをご覧ください。

preamble

デフォルト: undefined

バナーを持続させたり、ビルド結果についての関連情報を追加するために使用される、 preamble 設定のフィールドは、ピン留めされたコメントに変換され、出力されるすべてのJavaScriptファイルの先頭に配置される 文字列 です。ただし、生成されるポリフィルは例外です。エスケープされた改行は、このフィールドに指定された値の中に入れることができます。 Stencilはそれを尊重します。

Example:

preamble: 'Built with Stencil\nCopyright (c) SomeCompanyInc.'

Will generate the following comment:

/*!
 * Built with Stencil
 * Copyright (c) SomeCompanyInc.
 */

sourceMap

default: false

When set to true, sourcemaps will be generated for a project.

sourceMap: true

Sourcemaps create a translation between Stencil components that are written in TypeScript/JSX and the resulting JavaScript that is output by Stencil. Enabling source maps in your project allows for an improved debugging experience for Stencil components. For example, they allow external tools (such as an Integrated Development Environment) to add breakpoints directly in the original source code, which allows you to 'step through' your code line-by-line, to inspect the values held in variables, to observe logic flow, and more.

Please note: Stencil will always attempt to minify a component's source code as much as possible during compilation. When sourceMap is enabled, it is possible that a slightly different minified result will be produced by Stencil when compared to the minified result produced when sourceMap is not enabled.

Developers are responsible for determining whether or not they choose to serve sourcemaps in each environment their components are served and implementing their decision accordingly.

When omitted or set to false, sourcemaps will not be generated.

srcDir

デフォルト: src

srcDirは、各コンポーネントのソースとなるTypeScriptファイルを含むディレクトリを指定します。Stencilアプリのスタンダードは、デフォルトのsrcを使用することです。

srcDir: 'src'

taskQueue

default: async

Sets the task queue used by stencil's runtime. The task queue schedules DOM read and writes across the frames to efficiently render and reduce layout thrashing. By default, the async is used. It's recommended to also try each setting to decide which works best for your use-case. In all cases, if your app has many CPU intensive tasks causing the main thread to periodically lock-up, it's always recommended to try Web Workers for those tasks.

congestionAsync: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecessary reflows in some cases, especially during startup. congestionAsync is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.
async: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. async is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try Web Workers rather than the congestion async queue.
immediate: Makes writeTask() and readTask() callbacks to be executed synchronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The immediate setting is ideal for apps that do not provide long-running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try Web Workers.