lite server

ライトサーバー

Lightweight DevelopmentのみのNode ServerがWebアプリを提供し、ブラウザで開き、HTMLまたはJavaScriptが変更されたときにリフレッシュし、ソケットを使用してCSSの変更を挿入し、ルートが見つからないときにフォールバックページを持っています。

なぜ

BrowserSyncは、非常に高速な軽量開発サーバーで必要なもののほとんどを実行します。静的コンテンツを提供し、変更を検出し、ブラウザを更新し、多くのカスタマイズを提供します。

スパを作成するとき、ブラウザにのみ知られているルートがあります。たとえば、 /customer/21 Angularアプリのクライアントサイドルートです。このルートが手動で入力されるか、Angular Appのエントリポイントとして直接リンクされている場合（別名深いリンク）、Angularがまだロードされていないため、静的サーバーがリクエストを受け取ります。サーバーはルートの一致を見つけられないため、404を返します。この場合の目的の動作は、 index.html （または定義したアプリの開始ページ）を返すことです。 browsersyncは、自動的にフォールバックページを許可しません。ただし、カスタムミドルウェアが可能です。これはlite-serverが介入する場所です。

lite-server 、BrowserSync周辺のシンプルなカスタマイズされたラッパーであり、スパを簡単に提供できるようにします。

インストールと使用

推奨されるインストール方法は、プロジェクトのローカルNPMインストールです。

npm install lite-server --save-dev
yarn add lite-server --dev # or yarn

...そして、プロジェクトのpackage.jsonファイルに「スクリプト」エントリを追加します。

 # Inside package.json...
  "scripts" : {
    "dev" : " lite-server "
  },

上記のスクリプトエントリを使用すると、次のようにlite-serverを開始できます。

npm run dev

ローカルにインストールされているNPMバイナリを実行するためのその他のオプションについては、このスタックオーバーフローの質問で説明します。

その場で使用します

Lite-Serverはnpxで使用できます

npx lite-server

グローバルインストール

Lite-Serverは、優先される場合はグローバルにインストールできます。

npm install --global lite-server

# To run:
lite-server

カスタム構成

デフォルトの動作は、現在のフォルダーから提供され、ブラウザを開き、HTML5ルートフォールバックを./index.htmlに適用します。

Lite-ServerはBrowserSyncを使用し、プロジェクトのローカルbs-config.jsonまたはbs-config.jsファイルを介して構成オーバーライドを可能にします。

-cまたは--config=実行時間オプションを介して構成ファイルにカスタムパスを提供できます。

lite-server -c configs/my-bs-config.js

たとえば、サーバーポート、監視されたファイルパス、およびプロジェクトのベースディレクトリを変更するには、プロジェクトのフォルダーにbs-config.jsonを作成します。

{
  "port" : 8000 ,
  "files" : [ " ./src/**/*.{html,htm,css,js} " ],
  "server" : { "baseDir" : " ./src " }
}

また、ベースディレクトリへのカスタムパスを提供することもできます--baseDir=実行時間オプション：

lite-server --baseDir= " dist "

サーバーミドルウェアの変更を伴うより複雑な例は、 bs-config.jsファイルで実行できます。これにはmodule.exports = { ... };構文：

 module . exports = {
  server : {
    middleware : {
      // overrides the second middleware default with new settings
      1 : require ( 'connect-history-api-fallback' ) ( {
        index : '/index.html' ,
        verbose : true ,
      } ) ,
    } ,
  } ,
} ;

bs-config.jsファイルは、Lite-Server BrowserSyncインスタンスをその唯一の引数として受信する関数をエクスポートする場合があります。必要ありませんが、この関数の返品値は、デフォルトのLite-Server構成を拡張するために使用されます。

 module . exports = function ( bs ) {
  return {
    server : {
      middleware : {
        // overrides the second middleware default with new settings
        1 : require ( 'connect-history-api-fallback' ) ( {
          index : '/index.html' ,
          verbose : true ,
        } ) ,
      } ,
    } ,
  } ;
} ;

注：ミドルウェアを使用する場合、特定のミドルウェアモジュールをプロジェクトにインストールする必要があることに注意してください。上記の例では、次のことを行う必要があります。

npm install connect-history-api-fallback --save-dev

...それ以外の場合は、次のようなエラーが表示されます。

Error: Cannot find module ' connect-history-api-fallback '

別の例： connect-loggerなどのデフォルトのMiddleWaresの1つを削除するには、Array Indexをnullに設定できます。

 module . exports = {
  server : {
    middleware : {
      0 : null , // removes default `connect-logger` middleware
    } ,
  } ,
} ;

browsersyncオプションのセット全体のリストは、そのドキュメントにあります：http：//www.browserync.io/docs/options/

テスト

lite-serverを使用してEnd to Endテストを実行する場合、VerboseLyを記録したくない場合があります。また、ブラウザの開くのを防ぐこともできます。 bs-config.jsのこれらのオプションはlite-serverからのすべてのログを黙らせます。

  open: false
  logLevel: "silent" ,
  server : {
    middleware : {
      0 : null
    }
  } 

既知の問題

したがって、Angular 2のCSSは埋め込まれているため、BrowserSyncがファイルの変更をCSSに検出しても、ソケットを介してファイルを注入しません。回避策として、 injectChangesデフォルトでfalseになります。

貢献

1. フォークとクローン
2. 依存関係のインストール： npm install
3. 機能ブランチの作成： git checkout -b new-feature
4. Commitの変更： git commit -am 'Added a feature'
5. 静的コード分析とユニットテストを実行： npm test
6. リモートブランチへのプッシュ： git push origin new-feature
7. 新しいプルリクエストを作成します

ライセンス

MITライセンスに基づいてリリースされたコード。