Integrated Dev Server

Stencilには、開発を簡単にするために、統合された開発サーバーが付属しています。ビルドプロセスと開発サーバーを統合することで、Stencilは複雑なビルドスクリプトや設定を必要とせずに、開発時の体験を大幅に改善できます。アプリのビルドや再ビルドが行われると、コンパイラは開発サーバーと通信することができ、その逆も可能です。

Hot Module Replacement

コンパイラは監視モードを提供していますが、開発サーバーと組み合わせてブラウザ内で変更されたものだけをリロードすることで、さらに一歩先へ行くことができます。Hot Module Replacementを使用すると、アプリはブラウザ内の状態を維持しながら、ファイルの保存後に更新されたロジックで個々のコンポーネントを切り替えることができます。

Style Replacement

Webコンポーネントには独自のCSSが付属し、Shadow DOMを使用して固有のstyle tagを持つことができます。従来では、外部CSSリンクでは通常ライブリロードがうまくいきますが、shadow root内のインラインスタイルでコンポーネントを更新することは困難でした。統合された開発サーバーを使用すると、StencilはShadow DOMを使用しているかどうかに関係なく、ページ自体の更新を行うことなくすべてのコンポーネントのスタイルを動的に更新できます。

Development Errors

開発中に無効な構文などのエラーが発生した場合、Stencilはエラーやその原因をコンソールに記録するだけでなく、エラーをアプリにオーバーレイ表示して読みやすくします。

Open In Editor

開発中にブラウザ内でエラーがオーバーレイすると、ソーステキストを指す行番号がクリック可能になり、IDEでソースファイルを直接開きます。

Dev Server Config

例

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

export const config: Config = {
  devServer: {
    reloadStrategy: 'pageReload',
    port: 4444,
    https: {
      cert: readFileSync('cert.pem', 'utf8'),
      key: readFileSync('key.pem', 'utf8')
    }
  }
};