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许可发布的代码。