ビルドなしの開発( 2 ) : ES devサーバ

12163 ワード
lithtml buildless javascript webcomponents テキストリンク

ビルドせずに開発する


この記事はビルドなしで開発するシリーズの一部です.


  • テスト(近日公開予定)
    • その中で、異なるワークフローとブラウザAPIを調べました.この記事では、我々はどのように設定することができますes-dev-server , そしてそれはどのようにビルドせずに開発することができます.

    ESサーバ


    es-dev-server ビルドステップなしで開発するときに開発者の生産性に焦点を合わせる、構成可能なWebサーバーです.オプションを使用すると、キャッシュのような余分な機能、ファイルの変更、スパルーティングのリロード、古いモジュールのインポートと互換性モードの古いブラウザーをサポートする解決することができます.

    セットアップ


    空のNPMプロジェクトを作成し、インストールするes-dev-server :
    npm init
npm i -D es-dev-server
    クリエイトアindex.html プロジェクトのルートで
    <!DOCTYPE html>
<html>
<head></head>

<body>
  <div id="app"></div>
  <script type="module" src="./src/app.js"></script>
</body>

</html>
    ダミーを作成するsrc/app.js ファイル
    console.log('hello world');
    我々は今、アプリケーションを実行することができますes-dev-server :
    npx es-dev-server --open
    余分なフラグなしでes-dev-server 通常の静的ファイルサーバのように動作します.余分な機能を明示的に有効にする必要があります.

    輸入


    ビルドツールなしで開発するときに最初に実行されることの一つは、以下のような裸のモジュールインポートを扱う方法です.
    import foo from 'foo';
    ボックスから、これらの種類のインポートを処理する方法がわからないので、ブラウザはエラーをスローします.我々はインポートマップを使用して、これらのインポートを使用する方法を検討し、今後のブラウザAPI.
    インポートマップが適切にブラウザでサポートされるまでは、--node-resolve devサーバのフラグ.これは、ブラウザにそれらを提供する前にnodejsモジュールの解像度を使用してモジュール内のインポートを書き換えるでしょう.
    どのように動作するかを確認するにはlit-html , HTMLテンプレートライブラリ
    npm i -D lit-html
    チェンジsrc/app.js インポートする
    import { render, html } from 'lit-html';

const template = html`<p>Hello world!</p>`;
render(template, document.getElementById('app'));
    では、ノード解決フラグを追加してサーバーを再起動しましょう.
    npx es-dev-server --node-resolve --open
    ネットワークタブを検査すると、モジュールが期待通りに正しく表示されます.src/app.js に書き換える.
    import { render, html } from './node_modules/lit-html/lit-html.js';

const template = html`<p>Hello world!</p>`;
render(template, document.getElementById('app'));

    ウォッチモード


    あなたがファイルを編集している間、大きな生産性ブースターはブラウザーを再読み込みしています.
    このオプションを有効にするには、watch フラグ:
    npx es-dev-server --watch --node-resolve --open
    今、提供されたファイルの1つの中の何かを変えてくださいapp.js . ブラウザが更新されたコードで自動的に再読み込みされます.
    リロードはEventSource APIとIE 11ではサポートされていません.devサーバは小さなスクリプトを注入します.

    キャッシング

    es-dev-server ファイルシステムの最後の修正されたタイムスタンプを使ってファイルが変更されなかった場合は304を返す.これはかなりリロードを高速化します.オフにすることで、ブラウザでこれをテストすることができますDisable cache さわやか

    フォルダ構造


    すべてのプロジェクトがシングルであるというわけではありませんindex.html プロジェクトのルートで.だってes-dev-server 通常のWebサーバーと同じように、任意のフォルダからファイルを提供することができます.
    例えば、新しいフォルダを作成しましょうdemo , そして、我々を動かしてくださいindex.html インサイド.
    この変更を反映するために、スクリプトsrc pathを調整する必要があります.
    <script type="module" src="../src/app.js"></script>
    そして、サーバーにデモフォルダ内で開くように指示する必要があります.
    npx es-dev-server --node-resolve --open /demo/
    アプリケーションを変更せずに表示する必要があります.

    ルートディレクトリの変更


    Webサーバーのルートディレクトリを変更したくなるかもしれません/demo/ URLの一部:
    npx es-dev-server --root-dir /demo/ --open
    しかし、これは動作しません.なぜなら、Webサーバはルートディレクトリ内のファイルしか提供できないからです.デフォルトでは、現在の作業ディレクトリです.私たちの場合、Webサーバはsrc フォルダだけでなく、node_modules フォルダ.
    これはパッケージサブディレクトリからファイルを提供したいときにmonorepoで動作するときに一般的な問題です.サーブする必要があるモジュールの多くは、プロジェクトのルートにあるので、ルートディレクトリを2つのレベルに移動する必要があります.
    npx es-dev-server --root-dir ../../ --open packages/my-package/index.html

    スパルーティング


    あなたが1つのページ・アプリケーションを構築しているならば、あなたは何らかの形のフロントエンドルーティングをしていそうです.Deeplinkingまたはリフレッシュを有効にするには、Webサーバーを返す必要がありますindex.html より深いパスこれは時々歴史APIフォールバックと呼ばれます.
    ルータを設定するのはこの記事の範囲を超えていますが、オプションは--app-index フラグ:
    npx es-dev-server --node-resolve --app-index index.html --open
    使用する場合--app-index フラグは、サーバーが自動的にあなたのアプリケーションのインデックスには、明示的なパスを渡さない場合はサーバーを開きます--open .

    古いブラウザとの互換性


    我々は開発のための主要なブラウザの最新バージョンを使用することができますが、我々はまだ生産の古いブラウザをサポートする必要があります.また、すべての主要ブラウザの最新バージョンではまだサポートされていないいくつかの新しいブラウザ機能を使用することがあります.
    我々が我々のアプリをこれらのブラウザーのうちの1つに走らせるたびに、生産構築を走らなければならないならば、それは恥です.es-dev-server これを支援する複数の互換モードをサポートします.
    互換モードが有効になっている場合、サーバーは古いブラウザーに必要なポリフィルとコード変換を処理します.これは、ビルドツール領域に私たちを連れて行くので、私たちはもはや純粋に“ビルドせずに開発ツール”です.私はブラウザの互換性のためだけに使用しているので、それは素晴らしいと思う.あなたは明示的にこの行動を選ぶ必要があります.
    どのように動作するかを見てみましょう.動的インポートを追加app.js ボタンをクリックするとモジュールが遅延します.
    import { html, render } from 'lit-html';

async function lazyLoad() {
  await import('lit-html/directives/until.js');
}

const template = html`
  <button @click=${lazyLoad}>Click me!</button>
`;
render(template, document.getElementById('app'));
    動的インポートは本当に何も機能しません.我々がクロム、サファリとFirefoxでこれを走らせるならば、それはちょうどうまくいきます.EDGEがまだ動的なインポートをサポートしていないため、このコードを実行できません.
    我々は、最も軽い互換性モードをオンにすることができます.esm , この場合は
    npx es-dev-server --node-resolve --compatibility esm --open
    With esm 有効es-dev-server 注射するes-module-shims ローダスクリプトをインデックスに追加します.このコードを変更する必要はありません.注入されたスクリプトをインデックスファイルに表示できます.

    他の互換モードがより多くのポリフィルを加えるかもしれないので、若干の余分のボイラー板があります.ポリフィルは、ブラウザで積極的にキャッシュできるようにハッシュされます.
    その他esm があるmodern and all 互換モード.これらのモードは、一般的なブラウザAPIと使用のためのポリフィルを注入する@babel/preset-env 最新のJavaScript構文を互換性のある形式に変換するには.
    インmodern 互換性モードのコードは、クロム、サファリ、Firefoxの最新バージョンの2つのバージョンとの互換性が作られ、エッジ.
    インall 互換性モードのサポートは以前のブラウザ、IE 11へのすべての方法に拡張されます.ESモジュールをサポートしていないブラウザでは、systemjs modules .
    変換はサーバーを少し遅くするので、私はmodern or all 通常の開発中のモード.別のスクリプトを作成することができますpackage.json , と互換性モードでは、以前のブラウザでアプリケーションを表示するときのみ実行します.esm modeにはパフォーマンスに対して無視できる効果があります.

    インポートマップ


    前の記事では、裸のモジュール輸入を扱う今後のブラウザ機能として、インポートマップを簡潔に議論しました.es-module-shims and systemjs 両方のインポートマップをサポートします.互換モードが有効になっている場合、devサーバはインポートマップをこれらのライブラリで動作させるようにし、開発中に実行可能なワークフローを実行します.
    インポートマップAPIはまだ完全に安定していないので、もしあなたがこのパスを降りているなら、それはこの標準がどのように進化するかを保つために良いです.インポートマップを使用してワークフロー.

    より多くのオプション


    Check out the official documentation その他のオプションについては、devサーバーを他のツールとライブラリとして統合し、カスタムミドルウェアをインストールします.

    始める


    あなたのためにdevサーバをセットアップするプロジェクトから始めるために、使用してくださいopen-wc プロジェクトの足場
    npm init @open-wc
    プロジェクトをセットアップするlit-element , Webコンポーネントライブラリ.これをあなたが選んだどんなライブラリのためにでも交換することができます、セットアップはウェブ構成要素に特有でありません.
    React Router v4の変更点
    [RUST] Cargo