lite server

Lite-Server

輕量級開發僅服務於Web應用程序，在HTML或JavaScript更改時將其打開，在瀏覽器中打開它，使用插座注入CSS更改，並在找不到路由時具有後備頁面。

為什麼

BrowserSync在超快輕量級開發服務器中完成了我們想要的大部分功能。它提供靜態內容，檢測更改，刷新瀏覽器並提供許多自定義。

創建水療中心時，只有瀏覽器已知的路由。例如， /customer/21可能是Angular應用程序的客戶端路線。如果該路由是手動輸入或直接鏈接到Angular App的入口點（又稱深鏈接），則靜態服務器將接收請求，因為Angular尚未加載。服務器將找不到路由的匹配，因此返回404。在這種情況下，所需的行為是返回index.html （或我們定義的應用程序的任何啟動頁）。 BrowserSync不允許自動允許退縮頁面。但這確實允許自定義中間件。這是lite-server介入的地方。

lite-server是圍繞瀏覽器的簡單定制包裝器，使其易於使用水療中心。

安裝和用法

推薦的安裝方法是您項目的本地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二進製文件的其他選項：如何在Node_modules中使用本地安裝的軟件包

飛行

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 '

另一個示例：要刪除其中一個默認的中間Wares，例如connect-logger ，您可以將其數組索引設置為null ：

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

可以在其文檔中找到整個瀏覽器選項集的列表：http：//www.browsersync.io/docs/options/

測試

當使用lite-server運行最終測試時，我們可能不想言語記錄。我們可能還希望防止瀏覽器打開。 bs-config.js中的這些選項將使lite-server的所有記錄都沉默：

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

已知問題

因此，具有Angular 2的CSS即使瀏覽器同步檢測到文件更改為CSS，也不會通過插座注入文件。作為解決方法， injectChanges默認為false 。

貢獻

1. 叉和克隆
2. 安裝依賴項： npm install
3. 創建功能分支： git checkout -b new-feature
4. 提交更改： git commit -am 'Added a feature'
5. 運行靜態代碼分析和單元測試： npm test
6. 推到遠程分支： git push origin new-feature
7. 創建一個新的拉請請求

執照

根據MIT許可發布的代碼。