npm 包 `watch-server` 使用教程

简介

watch-server 是一个基于 Node.js 平台开发的 npm 包,可以监听本地文件的变动并启动一个 HTTP 服务器实时展示指定目录下的文件内容,适用于开发阶段的文件调试与展示。

安装

在安装之前,请先确保您已经安装了 Node.js 环境,如果没有安装,可以前往 官网 下载最新版本并进行安装。

安装 watch-server 的方式非常简单,只需要打开终端并输入以下命令即可:

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

命令说明:

  • -g 表示全局安装,可以在任意目录下使用 watch-server 命令。

使用说明

基本命令

安装完成后,使用 watch-server 命令即可启动 HTTP 服务器,例如:

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

此时,会默认监听 8080 端口,如果您需要使用其他端口,请使用 -p 参数指定,例如:

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

此时会监听 8888 端口。如果您只需要监听文件的变动,不需要启动 HTTP 服务器,可以使用 -w 参数,例如:

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

此时只会监听文件的变动,不会启动 HTTP 服务器。

高级命令

除了基本命令之外,watch-server 还提供了一些高级命令,可以更加灵活地控制文件的监听与展示。

指定监听目录

默认情况下,watch-server 会监听当前目录下的所有文件,包括子目录。如果您需要指定监听的目录,可以使用 -d 参数,例如:

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

此时 watch-server 会监听 /path/to/dir 目录下的所有文件。

指定展示的文件类型

默认情况下,watch-server 会展示监听目录下的所有文件,包括文件夹。如果您只需要展示某些特定类型的文件,可以使用 -t 参数,例如:

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

此时 watch-server 会展示监听目录下所有的 .js, .html.css 文件,其他文件将不会展示。

指定不监听的文件类型

-t 参数相反,watch-server 还提供了 -x 参数,可以指定不需要监听的文件类型,例如:

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

此时 watch-server 不会监听监听目录下所有的 .log, .tmp.bak 文件,其他文件将会监听。

指定忽略的文件或目录

如果您需要忽略某些文件或目录,可以使用 -i 参数,例如:

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

此时 watch-server 不会监听目录下的 node_moduleslog 文件夹,其他文件夹将会监听。

指定展示的文件数量

默认情况下,watch-server 会展示监听目录下的所有文件,如果您需要指定展示文件的数量,可以使用 -n 参数,例如:

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

此时 watch-server 会展示监听目录下的前 10 个文件,如果文件数量不足 10 个,则展示全部文件。

指定展示文件的顺序

默认情况下,watch-server 会按照文件名的字母顺序展示文件,如果您需要指定展示文件的顺序,可以使用 -o 参数,例如:

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

此时 watch-server 会按照文件名的字母顺序倒序展示文件,如果需要按照添加时间排序,可以使用 -o atime 参数。

示例代码

在使用 watch-server 的过程中,您还可以通过配置文件来控制文件的监听与展示。配置文件默认为当前目录下的 watch-server.json,如果需要自定义配置文件名,可以使用 -c 参数。

下面是示例配置文件的内容:

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

以上是 watch-server 的使用说明,希望对您有所帮助。如果您有其他疑问,可以前往官方文档查看更多资料。

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


猜你喜欢

  • npm 包 argenta 使用教程

    npm 包 argenta 是一个用于管理和部署前端应用的工具,它支持多个部署环境和自动化流程,可以方便地实现前端应用的上线、下线和版本管理。 本文将详细介绍 argenta 的使用方法和相关注意事项...

    3 年前
  • npm 包 semver-npmview 使用教程

    简介 semver-npmview 是一个 npm 包,用于查看 npm 包的版本号及其更新记录。它可以帮助我们快速了解自己使用的 npm 包是否已经更新,以及了解每个版本的改动情况。

    3 年前
  • npm 包 watch-spa-http-server 使用教程

    前言 随着前端技术的发展,单页面应用(SPA)在日常前端项目开发中越来越普遍。SPA通过JavaScript动态变化内容,而不需要重新加载整个页面,减少了服务器的负载和提升了用户体验。

    3 年前
  • npm 包 aor-language-german 使用教程

    在开发前端应用程序时,经常需要考虑多语言支持,以便能够面向更广泛的国际受众。这篇文章将介绍如何使用 npm 包 aor-language-german 来实现德语本地化支持。

    3 年前
  • npm 包 jorma 使用教程

    在前端开发过程中,我们常常需要使用一些列库来简化我们的开发工作。jorma 是一个 npm 包,它可以帮助我们快速生成可用的 React 组件。在本文中,我们将详细介绍 jorma 的使用方法,并为读...

    3 年前
  • npm 包 mfwwallet 使用教程

    在进行前端开发时,我们可能需要和钱包打交道,这时候可以使用 mfwwallet 这个 npm 包来完成操作。本篇文章将为您介绍 mfwwallet 的使用教程,包含详细的说明和示例代码。

    3 年前
  • 前端包 precisetimeout 的使用教程

    在编写前端应用程序时,总会遇到一些需要处理异步任务的情况。使用 setTimeout() 函数可以帮助我们延迟执行代码,但是由于 JavaScript 的事件循环机制,这并不能保证代码的准确性和可靠性...

    3 年前
  • npm 包 wec-mint-ui 使用教程

    简介 wec-mint-ui 是一款基于 mint-ui 前端组件库进行封装的 npm 包。它提供了一系列常用的 UI 组件、常见页面、工具方法等功能,可以帮助我们更便捷的开发前端项目,提升工作效率。

    3 年前
  • npm 包 @custom-element/app-bar 使用教程

    前言 前端应用是一个相对新颖的领域,同时也是一个快速发展的领域。开发者们常常可以发现一些好用的工具,而这些好用的工具可以让他们的工作更加顺畅和高效。其中一个工具就是 npm 包 @custom-ele...

    3 年前
  • npm包@custom-element/button使用教程

    前言 随着前端技术的不断发展,越来越多的自定义web组件出现在我们的视野中。其中,自定义元素(Custom Element)是Web Components 规范中的核心API之一。

    3 年前
  • npm 包 @custom-element/bottom-nav-bar 使用教程

    前端开发中,经常需要使用各种组件来构建页面,其中导航组件是不可缺少的重要组成部分。@custom-element/bottom-nav-bar 就是一种常用的底部导航组件,其具备便捷的使用和高度可定制...

    3 年前
  • npm 包 @custom-element/card 使用教程

    前言 在前端开发中,构建出易于复用和维护的组件库是具有重大意义的。而使用 npm 包管理器是组件开发和发布的第一步。在本文中,我们将介绍一个名为 @custom-element/card 的 npm ...

    3 年前
  • npm包 @custom-element/chip 使用教程

    介绍 @custom-element/chip是一个使用web组件技术实现的标签库,可以用来创建标签和标签样式,同时能够在网页中显示动态的数据。 本教程将详细介绍如何使用@custom-element...

    3 年前
  • npm 包 @eaglus/react-custom-scrollbars 使用教程

    在前端开发中,经常需要使用滚动条来控制页面内容的滚动,而实现自定义滚动条功能则是一种常见的需求。本文将介绍 npm 包 @eaglus/react-custom-scrollbars,该包实现了自定义...

    3 年前
  • npm 包 heytz-plugin-barcodescanner 使用教程

    简介 npm 包 heytz-plugin-barcodescanner 是前端常用的条码扫描器工具包。在移动设备上,很多应用都需要使用条码扫描器,如超市的二维码结算、快递员扫描快递单等等。

    3 年前
  • npm 包 js-marker-clusterer-universal 使用教程

    在前端开发中,地图相关的应用越来越多,其功能也越来越复杂。而在地图上显示大量标记点时,为了使页面清晰易读,一种常见的做法是利用聚合标记点的方式进行显示。其中,js-marker-clusterer-u...

    3 年前
  • npm 包 threesixty-slider-angular5 使用教程

    在前端开发中,我们经常需要使用各种第三方库来简化和加速我们的工作。其中,npm 是一个非常重要的工具,它可以方便地管理我们所需的第三方库。 threesixty-slider-angular5 是一个...

    3 年前
  • npm 包 @custom-element/checkbox 使用教程

    在前端开发中,很常见的场景是需要创建一个复选框。这时,我们可以使用 npm 包 @custom-element/checkbox。本文将详细介绍如何使用该包,以及它的学习和指导意义。

    3 年前
  • npm 包 @custom-element/core 使用教程

    介绍 @custom-element/core 是一个开源的 Web 组件库,使用 Web Components 技术构建,用于创建自定义 HTML 元素。该库提供了一些常用的组件、插件和工具,帮助开...

    3 年前
  • npm 包 @custom-element/grid-list 使用教程

    在 web 开发中,常常需要使用网格列表布局,以方便排列展示各种元素。而 @custom-element/grid-list 正是一个通过自定义元素方式实现网格列表布局的 npm 包。

    3 年前

相关推荐

    暂无文章