lite-server_如何使用lite-server进行简单开发的Web服务器

lite-server

by Todd Palmer

托德·帕尔默(Todd Palmer)

如何使用lite-server进行简单开发的Web服务器 (How you can use lite-server for a simple development Web Server)

If you need an easy and light-weight Web Server just to do some development, lite-server is an excellent choice.

如果仅需要简单易用的Web Server来进行开发，则lite-server是一个绝佳的选择。

In this article I will:

在本文中，我将：

1. Briefly explain the what and why of lite-server.

   简要说明lite-server的内容和原因 。

2. Show you how to create a simple web application and serve it with lite-server.

   向您展示如何创建一个简单的Web应用程序并将其与lite-server一起使用 。

3. Explain some simple lite-server configuration.

   解释一些简单的lite-server配置 。

4. Finally, if you just want to install lite-server once and use it everywhere, take a look at my project www-lite-server in GitHub.

   最后，如果您只想安装一次lite-server并在各处使用它 ，请查看我在GitHub中的项目www-lite-server 。

Although this is written as an introductory level article, I expect that:

尽管本文是介绍性文章，但我希望：

• You know a little about the command prompt, such as creating and switching directories.
  您对命令提示符有些了解，例如创建和切换目录。

• You have npm installed and understand how to use it to install packages.

  您已经安装了npm并了解如何使用它来安装软件包。

• You know how to create simple web pages using HTML.
  您知道如何使用HTML创建简单的网页。

什么是精简服务器？ (What is lite-server?)

lite-server is a lightweight development web server with support for Single Page Apps (SPAs). Actually, it is bit more technical than that. But, for our purposes, that’s good enough.

lite-server是一种轻量级开发Web服务器，支持单页应用程序(SPA) 。 实际上，它比这更具技术性。 但是，就我们的目的而言，这已经足够了。

lite-server was created by John Papa. You should follow him and read all his stuff, because he is a true hero of the open source community!

lite-server由John Papa创建。 您应该关注他并阅读他的所有文章，因为他是开源社区的真正英雄 ！

John created lite-server because he wanted a simple web server he could use to test deploying Single Page Applications that leverage URL routes. Maybe you aren’t using JavaScript GUI Frameworks like Angular, React, and Vue.js just yet. But know that when you do, lite-server will still be there for you.

John创建了lite-server，因为他想要一个简单的Web服务器，可以用来测试部署利用URL路由的Single Page Application 。 也许您还没有使用Angular ， React和Vue.js之类JavaScript GUI框架。 但是请知道，当您这样做时， lite-server仍然会为您服务。

So let’s take advantage of John’s work by actually…

因此，让我们实际上利用约翰的工作...

在Web项目中使用lite-server (Using lite-server in a Web Project)

First, we will create a small web project with a simple index.html. We’ll install lite-server. Then, we’ll use lite-server to serve our web page.

首先，我们将使用简单的index.html创建一个小型Web项目。 我们将安装lite-server 。 然后，我们将使用lite-server服务我们的网页。

创建一个项目 (Create a Project)

At your command prompt, run:

在命令提示符下，运行：

mkdir litecd lite

This creates a new directory called lite and makes it our working directory.

这将创建一个名为lite的新目录，并将其作为我们的工作目录。

In our lite directory, add an index.html file that looks like this:

在我们的lite目录中，添加一个如下所示的index.html文件：

安装精简服务器 (Install lite-server)

At the command prompt in your lite directory, run:

在lite目录中的命令提示符下，运行：

npm init -y

We use npm to initialize an empty project. The -y tells it to just use the defaults for any parameters.

我们使用npm初始化一个空项目。 -y告诉它只对所有参数使用默认值。

To add lite-server to our project we can run:

要将lite-server添加到我们的项目中，我们可以运行：

npm install --save-dev lite-server

This installs the lite-server package and adds it to the devDependencies in our project’s package.json file.

这将安装lite-server软件包，并将其添加到项目的package.json文件中的devDependencies中。

"devDependencies": {    "lite-server": "^2.3.0"  }

Also, you can take a look at the node_modules folder and see that lite-server and its dependencies are all installed there.

另外，您可以查看一下node_modules文件夹，并看到lite-server及其依赖项都已安装在该文件夹中。

运行精简服务器 (Run lite-server)

In your package.json file, modify the scripts object. Replace the contents with an entry called start that runs lite-server, like this:

在package.json文件中，修改脚本对象。 将内容替换为运行lite-server的名为start的条目，如下所示：

"scripts": { "start": "lite-server"},

So now your package.json file should look like this:

因此，现在您的package.json文件应如下所示：

To run lite-server and serve your index.html web page, run:

要运行lite-server并提供index.html网页，请运行：

npm start

Notice that lite-server launches your default browser and displays your index.html:

请注意， lite-server将启动默认浏览器并显示index.html ：

Furthermore, lite-server is built on Browsersync. So, when we update our index.html, lite-server will refresh automatically. Let’s try it!

此外， lite-server建立在Browsersync之上。 因此，当我们更新index.html时 ，lite-server将自动刷新。 试试吧！

In your index.html, just before the <;a> tag, add a heading tag to the page:

在index.html中的< ; a>标记之前，向页面添加一个标题标记：

<h1>lite-server</h1>

Save your file and watch your browser update auto-magically!

保存文件并自动神奇地观看浏览器更新！

一些简单的配置 (Some Simple Configuration)

lite-server supports a lot of flexibility as to how it is configured. But for this article we will keep it simple.

lite-server在配置方式方面支持很多灵活性。 但是对于本文，我们将使其保持简单。

We will create a lite-server configuration file and edit it to change:

我们将创建一个lite-server配置文件并对其进行编辑以进行更改：

• the HTTP port
  HTTP端口
• the web root directory
  Web根目录
• which browser gets launched
  哪个浏览器启动

精简服务器配置文件 (The lite-server Configuration File)

The config file for lite-server is: bs-config.json

lite-server的配置文件是： bs-config.json

Why bs-config? Well, lite-server is built on Browsersync which supports having a JSON or JavaScript config file named bs-config.

为什么选择bs-config ？ 好吧， lite-server是基于Browsersync构建的，该浏览器支持具有名为bs-config的JSON或JavaScript配置文件。

Add a bs-config.json file to the root of your project. It should look like this:

将bs-config.json文件添加到项目的根目录。 它看起来应该像这样：

This example config file really just duplicates the default values. But, we will use it as the basis for explaining how to change some of the more useful configuration parameters.

这个示例配置文件实际上只是复制了默认值。 但是，我们将以此为基础来解释如何更改一些更有用的配置参数。

指定HTTP端口 (Specifying the HTTP Port)

By default, lite-server uses port 3000. But if you would like to use a different port, you can easily change it.

默认情况下， lite-server使用端口3000 。 但是，如果您想使用其他端口，则可以轻松更改它。

For example, let’s switch it to use port 3001. In your bs-config.json file, change the port to look like this:

例如，让我们将其切换为使用端口3001。在bs-config.json文件中，将端口更改为如下所示：

"port": 3001,

Restart lite-server using npm start.

使用npm start重新启动lite-server 。

lite-server launches our default browser again. But, this time the URL looks like this:http://localhost:3001/

lite-server再次启动我们的默认浏览器。 但是，这次的URL看起来像这样： http://localhost:3001/

指定网络根 (Specifying the Web Root)

By default, lite-server serves pages from the current directory where it is installed. Using the server element in bs-config.json, we can specify a different web root or “base directory” as lite-server calls it.

默认情况下， lite-server提供安装目录中当前目录中的页面。 使用bs-config.json中的server元素，我们可以在lite-server调用它时指定另一个Web根目录或“基本目录” 。

Let’s try it:

让我们尝试一下：

1. In your lite project, create a directory called: test

   在您的lite项目中，创建一个目录： test

2. Copy your index.html to the test directory

   将index.html复制到测试目录

3. In bs-config.json, modify the server element to look like this:

   在bs-config.json中，将服务器元素修改为如下所示：

"server": {  "baseDir": "./test"}

Restart lite-server. You can see in the output that it is:Serving files from: ./test

重新启动lite-server。 您会在输出中看到它是：正在从以下位置提供文件：./test

启动浏览器 (Launching the Browser)

When it starts up, lite-server launches our default browser to display the web page. But, maybe you want your project to support both IE and Chrome. Well, we can tell lite-server to launch both.

启动时， lite-server将启动我们的默认浏览器以显示网页。 但是，也许您希望您的项目同时支持IE和Chrome 。 好吧，我们可以告诉lite-server两者启动。

Notice the browser entry in the config file is actually an array. So we can give it a list of strings.

请注意，配置文件中的浏览器条目实际上是一个数组。 因此，我们可以给它一个字符串列表。

Let’s have some fun with this and make lite-server launch a bunch of browsers. On my machine I have three browsers installed: Chrome, IE, and Firefox. To make lite-server launch all three, I just change the browser entry to:

让我们玩得开心，让lite-server启动一堆浏览器。 在我的机器上，我安装了三个浏览器：Chrome，IE和Firefox。 要使lite-server启动所有这三个服务器 ，我只需将浏览器条目更改为：

"browser": ["chrome", "iexplore", "firefox"]

And now when I run npm start I see this:

现在，当我运行npm start我看到以下内容：

Because hey! You can never have too many browsers open.

因为嘿！ 您永远不会打开太多的浏览器。

www-lite-server：安装一次即可在任何地方使用 (www-lite-server: Install Once and Use It Anywhere)

Since we can configure the server Base Directory in our bs-config.json, we can actually install lite-server in one place and point it at any other project.

由于我们可以在bs-config.json中配置服务器基本目录 ，因此我们实际上可以将lite-server安装在一个位置，并将其指向任何其他项目。

I have created a simple project called www-lite-server for you that does just that. You can use it like this:

我已经为您创建了一个名为www-lite-server的简单项目。 您可以像这样使用它：

git clone https://github.com/t-palmer/www-lite-server.gitcd www-lite-servernpm installnpm start

This will serve up the local index.html, which looks like this:

这将提供本地index.html，如下所示：

By modifying the baseDir entry in the bs-config.json, you can have www-lite-server serve web pages for any of your projects. For example, if you have a project in:C:\dev\my-project just change your bs-config.json to look something like this:

通过修改bs-config.json中的baseDir条目，您可以让www-lite-server为您的任何项目提供网页。 例如，如果您在以下位置有一个项目： C：\ dev \ my-project，只需将bs-config.json更改为如下所示：

{  "port": 3000,  "server": {    "baseDir": "C:\dev\my-project"  }}

Then use npm start to start serving web pages.

然后使用npm start开始提供网页。

一些技术说明 (Some Technical Notes)

lite-server is just a wrapper around Broswersync. Actually, it is Browsersync that does most of the “heavy-lifting”. However, Single Page Apps typically use routes which Browsersync doesn’t handle. For more information, see the Why section on the lite-server GitHub README.

lite-server只是Broswersync的包装。 实际上，大多数“繁重的工作”都是由Browsersync进行的。 但是， 单页应用程序通常使用Browsersync无法处理的路由。 有关更多信息，请参见lite-server GitHub README上的Why部分 。

翻译自: https://www.freecodecamp.org/news/how-you-can-use-lite-server-for-a-simple-development-web-server-33ea527013c9/

lite-server