Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.
BrowserSync does most of what we want in a super fast lightweight development server. It serves the static content, detects changes, refreshes the browser, and offers many customizations.
BrowserSync在超快速轻量级开发服务器中做了大部分工作。 它提供静态内容，检测更改，刷新浏览器，并提供许多自定义。
When creating a SPA there are routes that are only known to the browser. For example,/customer/21 may be a client side route for an Angular app. If this route is entered manually or linked to directly as the entry point of the Angular app (aka a deep link) the static server will receive the request, because Angular is not loaded yet. The server will not find a match for the route and thus return a 404. The desired behavior in this case is to return theindex.html (or whatever starting page of the app we have defined). BrowserSync does not automatically allow for a fallback page. But it does allow for custom middleware. This is wherelite-server steps in.
创建SPA时，只有浏览器才知道路由。 例如，/ customer / 21```可能是Angular应用程序的客户端路由。 如果此路由是手动输入或直接链接到Angular应用程序的入口点（又称深层链接），则静态服务器将收到该请求，因为Angular尚未加载。 服务器将找不到路由的匹配，因此返回一个404。在这种情况下，所需的行为是返回```index.html（或我们定义的应用的任何起始页面）。 BrowserSync不会自动允许回退页面。 但它确实允许定制中间件。 这是lite-server的涉足的。
lite-serveris a simple customized wrapper around BrowserSync to make it easy to serve SPAs.
lite-server是一个简单的定制包装器，用于浏览器浏览器，以便轻松投放SPA。
Installation and Usage
The recommended installation method is a local NPM install for your project:
...and add a "script" entry within your project's package.json file:
Inside package.json...
"scripts": {
"dev": "lite-server"
},
With the above script entry, you can then start lite-server via:
$ npm run dev
Other options for running locally installed NPM binaries is discussed in this Stack Overflow question: How to use package installed locally in node_modules
使用本地的二进制包，而不用Npm install的方式，在stackover flow上有。
Global Installation
lite-server can be also installed globally, if preferred:
$ npm install -g lite-server
To run:
$ lite-server
Custom Configuration定制配置
The default behavior serves from the current folder, opens a browser, and applies a HTML5 route fallback to ./index.html.
默认行为来自当前文件夹，打开浏览器，并将HTML5路由备用应用于./index.html。
lite-server uses BrowserSync, and allows for configuration overrides via a local bs-config.json or bs-config.js file in your project.
lite-server使用BrowserSync，并允许通过项目中的本地bs-config.json或bs-config.js文件进行配置覆盖。
You can provide custom path to your config file via -c or --config= run time options:
您可以通过-c或--config =运行时选项为您的配置文件提供自定义路径：
lite-server -c configs/my-bs-config.js
For example, to change the server port, watched file paths, and base directory for your project, create a bs-config.json in your project's folder:
例如，要更改项目的服务器端口，监视文件路径和基本目录，请在项目的文件夹中创建一个bs-config.json：
You can also provide custom path to your base directory --baseDir= run time options:
您还可以为您的基本目录提供自定义路径--baseDir =运行时选项：
lite-server --baseDir="dist"
A more complicated example with modifications to the server middleware can be done with a bs-config.js file, which requires the module.exports = { ... }; syntax:
可以使用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})
}
}
};
The bs-config.js file may also export a function that receives the lite-server Browsersync instance as its only argument. While not required, the return value of this function will be used to extend the default lite-server configuration.
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
})
}
}
};
};
lite-server
Lightweight node server 轻量级node服务器
lite-server
Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.
服务于Web应用程序的轻量级开发node服务器在浏览器中打开，刷新HTML或JavaScript更改时，使用套接字注入CSS更改，并且在找不到路由时具有后备页面。
Why
BrowserSync does most of what we want in a super fast lightweight development server. It serves the static content, detects changes, refreshes the browser, and offers many customizations. BrowserSync在超快速轻量级开发服务器中做了大部分工作。 它提供静态内容，检测更改，刷新浏览器，并提供许多自定义。 When creating a SPA there are routes that are only known to the browser. For example,
/customer/21may be a client side route for an Angular app. If this route is entered manually or linked to directly as the entry point of the Angular app (aka a deep link) the static server will receive the request, because Angular is not loaded yet. The server will not find a match for the route and thus return a 404. The desired behavior in this case is to return theindex.html(or whatever starting page of the app we have defined). BrowserSync does not automatically allow for a fallback page. But it does allow for custom middleware. This is wherelite-serversteps in. 创建SPA时，只有浏览器才知道路由。 例如，/ customer / 21```可能是Angular应用程序的客户端路由。 如果此路由是手动输入或直接链接到Angular应用程序的入口点（又称深层链接），则静态服务器将收到该请求，因为Angular尚未加载。 服务器将找不到路由的匹配，因此返回一个404。在这种情况下，所需的行为是返回```index.html（或我们定义的应用的任何起始页面）。 BrowserSync不会自动允许回退页面。 但它确实允许定制中间件。 这是lite-server的涉足的。lite-serveris a simple customized wrapper around BrowserSync to make it easy to serve SPAs.lite-server是一个简单的定制包装器，用于浏览器浏览器，以便轻松投放SPA。Installation and Usage
The recommended installation method is a local NPM install for your project:
...and add a "script" entry within your project's package.json file:
Inside package.json...
With the above script entry, you can then start lite-server via:
Other options for running locally installed NPM binaries is discussed in this Stack Overflow question: How to use package installed locally in node_modules 使用本地的二进制包，而不用Npm install的方式，在stackover flow上有。
Global Installation
lite-server can be also installed globally, if preferred:
To run:
Custom Configuration定制配置
The default behavior serves from the current folder, opens a browser, and applies a HTML5 route fallback to ./index.html. 默认行为来自当前文件夹，打开浏览器，并将HTML5路由备用应用于./index.html。 lite-server uses BrowserSync, and allows for configuration overrides via a local bs-config.json or bs-config.js file in your project. lite-server使用BrowserSync，并允许通过项目中的本地bs-config.json或bs-config.js文件进行配置覆盖。 You can provide custom path to your config file via -c or --config= run time options: 您可以通过-c或--config =运行时选项为您的配置文件提供自定义路径：
For example, to change the server port, watched file paths, and base directory for your project, create a bs-config.json in your project's folder: 例如，要更改项目的服务器端口，监视文件路径和基本目录，请在项目的文件夹中创建一个bs-config.json：
You can also provide custom path to your base directory --baseDir= run time options: 您还可以为您的基本目录提供自定义路径--baseDir =运行时选项：
A more complicated example with modifications to the server middleware can be done with a bs-config.js file, which requires the module.exports = { ... }; syntax: 可以使用bs-config.js文件来完成对服务器中间件进行修改的更复杂的示例，这需要module.exports = {...}; 句法：
The bs-config.js file may also export a function that receives the lite-server Browsersync instance as its only argument. While not required, the return value of this function will be used to extend the default lite-server configuration.