lite server Download - lite server Quellcode herunterladen

lite server

Website-Daten

1.0.0

Herunterladen

Lite-Server

Leichter Entwicklung nur Knotenserver, der eine Web -App dient, öffnet sie im Browser, aktualisiert, wenn sich HTML- oder JavaScript ändert, CSS ändert sich mit Steckdosen und verfügt über eine Fallback -Seite, wenn keine Route gefunden wird.

Warum

BrowserSync macht das meiste, was wir auf einem superschnellen leichten Entwicklungsserver wollen. Es dient dem statischen Inhalt, erkennt Änderungen, aktualisiert den Browser und bietet viele Anpassungen.

Beim Erstellen eines Spa gibt es Routen, die dem Browser nur bekannt sind. Zum Beispiel kann /customer/21 eine Client -Seite für eine Winkel -App sein. Wenn diese Route manuell eingegeben oder direkt als Einstiegspunkt der Angular -App (auch bekannt als Deep Link) verknüpft ist, erhält der statische Server die Anforderung, da Angular noch nicht geladen ist. Der Server findet keine Übereinstimmung für die Route und gibt somit ein 404 zurück. Das gewünschte Verhalten in diesem Fall besteht darin, den index.html (oder die Startseite der App, die wir definiert haben) zurückzugeben. BrowserSync erlaubt keine Fallback -Seite automatisch. Es ermöglicht jedoch benutzerdefinierte Middleware. Hier tritt lite-server ein.

lite-server ist eine einfache maßgeschneiderte Wrapper um Browsersync, damit es einfach zu servieren ist, Spas zu servieren.

Installation und Verwendung

Die empfohlene Installationsmethode ist eine lokale NPM -Installation für Ihr Projekt:

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

... und fügen Sie einen "Skript" -Intrag in package.json -Datei Ihres Projekts hinzu:

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

Mit dem obigen Skripteintrag können Sie lite-server über:

npm run dev

Weitere Optionen für das Ausführen lokal installierter NPM -Binärdateien werden in dieser Frage über den Stack -Überlauf erläutert: So verwenden Sie das Paket, das lokal in node_modules installiert ist

Verwenden im laufenden Fliegen

Lite-Server kann mit npx verwendet werden

npx lite-server

Globale Installation

Lite-Server kann auch global installiert werden, falls bevorzugt:

npm install --global lite-server

# To run:
lite-server

Benutzerdefinierte Konfiguration

Das Standardverhalten dient aus dem aktuellen Ordner, öffnet einen Browser und wendet eine HTML5 -Route auf ./index.html an.

Lite-Server verwendet BrowserSync und ermöglicht Konfigurationsüberschreibungen über eine lokale bs-config.json oder bs-config.js Datei in Ihrem Projekt.

Sie können Ihre Konfigurationsdatei über -c oder --config= Laufzeitoptionen für Ihre Konfigurationsdatei bereitstellen:

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

Zum Beispiel, um den Serverport, den angesehenen Dateipfade und das Basisverzeichnis für Ihr Projekt zu ändern, erstellen Sie im Ordner Ihres Projekts einen bs-config.json :

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

Sie können auch einen benutzerdefinierten Pfad zu Ihrem Basisverzeichnis bereitstellen --baseDir= Laufzeitoptionen:

lite-server --baseDir= " dist "

Ein komplizierteres Beispiel mit Änderungen an der Server Middleware kann mit einer bs-config.js Datei durchgeführt werden, für die module.exports = { ... }; Syntax:

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

Die bs-config.js Datei kann auch eine Funktion exportieren, die die Lite-Server-Browsersync-Instanz als einziges Argument empfängt. Obwohl dies nicht erforderlich ist, wird der Rückgabewert dieser Funktion verwendet, um die Standard-Lite-Server-Konfiguration zu erweitern.

 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 ,
        } ) ,
      } ,
    } ,
  } ;
} ;

Hinweis: Beachten Sie, dass das spezifische Middleware -Modul bei Verwendung von Middleware in Ihrem Projekt installiert werden muss. Für das obige Beispiel müssen Sie:

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

... Andernfalls erhalten Sie einen ähnlichen Fehler wie:

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

Ein weiteres Beispiel: Um eines der Standardwares wie connect-logger zu entfernen, können Sie den Array-Index auf null festlegen:

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

Eine Liste der gesamten Set von Browsersync -Optionen finden Sie in den DOCs: http://www.browsersync.io/docs/options/

Testen

Wenn Sie lite-server zum Ausführen von End-to-End-Tests verwenden, möchten wir möglicherweise nicht ausführlich protokollieren. Möglicherweise möchten wir auch verhindern, dass der Browser sich öffnet. Diese Optionen in der bs-config.js werden die gesamte Protokollierung von lite-server zum Schweigen bringen:

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

Bekannte Probleme

CSS mit Angular 2 ist eingebettet, obwohl BrowserSync die Dateiänderung in CSS erkennt, die Datei nicht über Sockets injiziert. Als Problemumgehung wird injectChanges standardmäßig false .