npm 包 @gerhobbelt/live-server 使用教程

前言

在前端开发中,我们常常需要通过一个本地服务器来预览我们所写的代码。而 @gerhobbelt/live-server 就是这样一个本地服务器。它可以帮助我们快速启动一个本地服务器,并自动刷新网页。

在本文中,我们将介绍如何使用 @gerhobbelt/live-server,具体内容包括:

  • 安装 @gerhobbelt/live-server
  • 启动服务器并预览网页
  • 自定义服务器选项
  • 使用示例

安装 @gerhobbelt/live-server

在安装 @gerhobbelt/live-server 之前,我们需要先确保本地已经安装了 Node.js

使用以下命令进行全局安装:

--- ------- -- -----------

启动服务器并预览网页

在安装完成后,我们可以使用以下命令来启动服务器:

-----------

然后,它将自动打开一个新的浏览器窗口并显示您的 HTML 文件。如果您更改了您的 HTML、CSS 或 JavaScript 文件,它将自动刷新页面,无需手动刷新。

默认情况下,live-server 将使用当前目录作为服务器的根目录。您也可以使用以下命令明确指定根目录:

----------- ----------- --------------

这将在 8080 端口上启动服务器,并将服务器绑定到本机 IP 地址。

自定义服务器选项

如果您想对 live-server 进行更多的自定义设置,您可以传递一些选项。以下是一些可能有用的选项:

  • --port:指定服务器端口。
  • --host:指定服务器绑定到的 IP 地址。
  • --open:指定是否在启动服务器后自动打开浏览器。
  • --cors:禁用 CORS。
  • --no-browser:禁用自动打开浏览器选项。
  • --watch:指定要监视的文件夹或文件。

您可以将多个选项组合在一起,并使用逗号分隔它们。例如:

----------- ----------- -------------- ---------------- ------

这将启动服务器,并在 8080 端口上进行绑定。它还打开了 README.md 文件,禁用了 CORS。

使用示例

以下是如何使用 @gerhobbelt/live-server 的示例:

首先,确保您的项目目录如下:

-- ----------
-- ----
    -- ---------
-- ---
    -- ---------

接下来,运行以下命令:

-----------

此时,服务器将在默认端口(8080)上启动,并自动打开浏览器。您还可以使用以下命令:

----------- ----------- ----------------

这将在端口 8081 上启动服务器,并将服务器绑定到 127.0.0.1

现在,您可以在浏览器中预览您的网页,并进行实时编辑。

结语

@gerhobbelt/live-server 是一个非常实用的工具,它可以帮助我们快速、方便地启动本地服务器,并实时预览我们所写的代码。希望本文能够对您有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedc7f0b5cbfe1ea06122d1


猜你喜欢

  • npm 包 @lerna/run-lifecycle 使用教程

    前言 在前端开发中,很多时候我们需要同时维护多个子项目,而这些子项目之间可能有一些复杂的依赖关系。针对这种情况,我们可以使用 Lerna 进行管理。 Lerna 是一个优秀的工具,它可以帮助我们解决多...

    4 年前
  • npm 包 @lerna/query-graph 使用教程

    在前端开发中,一些复杂的项目经常需要使用多个 npm 包,这时就需要将这些包进行管理和协作。@lerna/query-graph 就是一个可以帮助你对多个 npm 包进行依赖和协作管理的工具。

    4 年前
  • npm 包 @lerna/run-topologically 使用教程

    前言 在开发和维护大型前端项目时,通常涉及多个子模块和依赖包的同时管理和构建,这时候我们会用到一些工具和技术来帮助我们完成这些任务。其中一个非常重要的工具就是 Lerna。

    4 年前
  • npm 包 @lerna/version 使用教程

    简介 @lerna/version 是 Lerna 中的一款 npm 包,它主要用于处理项目中的版本号,提供了一些常用的版本号处理方法,如对应升级 package.json 中所有依赖、升级指定包的版...

    4 年前
  • npm 包 libnpmsearch 使用教程

    简介 npm 是 JavaScript 世界中最大的包存储库,本文将重点介绍 npm 官方提供的 libnpmsearch 包的使用方法,具体包括如下内容: libnpmsearch 包介绍 安装 ...

    4 年前
  • npm 包 libnpm 使用教程

    简介 libnpm 是一个开源的 npm 包管理器库,它可以帮助我们更好的管理和维护我们的 npm 包。本文将详细介绍如何使用该库来管理我们的 npm 包。 安装 首先我们需要全局安装 libnpm,...

    4 年前
  • npm 包 libnpmorg 使用教程

    npm 是一个用于管理 Node.js 模块(package)的工具,现在已成为前端开发中不可缺少的一部分。在 npm 的生态系统中,有许多优秀的第三方模块可供我们使用,以便更便捷地开发我们的应用程序...

    4 年前
  • npm 包 libnpmteam 使用教程

    简介 npm 是一个非常流行的 JavaScript 包管理器。尽管 npm 是一个开放式的包管理器,但是经常需要协作使用特定的包或共享包工作。 这样的情况,npm 包 libnpmteam 可以帮助...

    4 年前
  • npm 包 angular-estree-parser 使用教程

    前言 在前端开发中,我们经常需要对代码进行静态分析,比如检测代码中是否使用了特定的 API、是否满足特定的编码规范等等。而对代码进行静态分析的工具也有很多,比如 ESLint、TSLint 等等。

    4 年前
  • npm 包 angular-html-parser 使用教程

    前端开发中,数据的展示和交互往往通过 HTML 页面来实现。而针对这些页面的解析和处理,开发者需要使用各种工具和框架来辅助完成。今天我们要介绍的是一个非常实用的 npm 包,它就是 angular-h...

    4 年前
  • npm 包 cjk-regex 使用教程

    在前端开发中,中日韩语言的处理可能是一个常见的任务。而在 JavaScript 中,匹配中文和日文等东亚字符却不如匹配其他字符那么容易。这时,一个叫做 cjk-regex 的 npm 包就可以帮助我们...

    4 年前
  • npm 包 editorconfig-to-prettier 使用教程

    在编写前端项目时,我们经常会遇到代码风格不统一的问题。这个问题可以通过使用代码风格规范来解决。而 EditorConfig 和 Prettier 就是两个非常流行的代码风格规范工具。

    4 年前
  • npm包find-project-root使用教程

    在前端开发中,我们经常需要在项目中寻找根路径(root path),这个任务可能需要我们手动去找到路径,在大型项目中这一过程可能会非常繁琐。在这种情况下,使用npm包find-project-root...

    4 年前
  • npm 包 html-styles 使用教程

    什么是 html-styles? html-styles 是一个用于在 HTML 中添加样式的库。它提供了一系列的 CSS 类名,使得我们可以通过添加这些类名来快速地实现一些样式效果,而无需自己编写 ...

    4 年前
  • npm 包 filter-where 使用教程

    在前端开发中,我们经常需要从一组数据中筛选出特定的数据,常常需要在数据中进行条件筛选。filter-where 是一个强大的 npm 包,可以帮助我们轻松地在数组中进行筛选操作。

    4 年前
  • npm 包 array-tools 使用教程

    在前端开发过程中,操作数组是常见的需求之一。npm 包 array-tools 是一个非常有用的工具,提供了许多便捷的数组操作方法。本文将介绍如何使用 array-tools。

    4 年前
  • npm 包 console-dope 使用教程

    前言 在开发前端项目时,console 日志是我们最常用的调试工具之一。然而,过于简单的 console 日志输出很难满足我们在调试时的需求,很难快速定位问题。 这时,我们就需要更强大的 consol...

    4 年前
  • npm 包 linguist 使用教程

    如果您正在进行前端开发,您可能会遇到需要处理编程语言的需求。例如,您可能需要展示代码的语法高亮,或者需要检测文件的编程语言类型。在这种情况下,您可以使用 npm 包 linguist。

    4 年前
  • npm 包 linguist-languages 使用教程

    在前端开发中,往往需要处理多种不同的语言文件。而 npm 包 linguist-languages 提供了一种方便快捷的方式,可以识别、分类和统计各种语言文件。下面将详细介绍如何使用这个 npm 包,...

    4 年前
  • npm 包 unicode-regex 使用教程

    在前端开发中,我们常常会遇到需要匹配 Unicode 字符的情况。如果只使用普通的正则表达式,可能无法匹配 Unicode 字符,或者匹配出现错误。这时,我们可以使用一个名为 unicode-rege...

    4 年前

相关推荐

    暂无文章