npm 包 meili-cli-watch 使用教程

阅读时长 4 分钟读完

前言

在前端开发中,我们经常需要自动化构建,并自动检测代码的变化,这时候自动化构建工具就派上用场了。但是,传统的构建工具均需要手动启动构建任务,造成了较大的人力浪费。为了解决这个问题,meili-cli-watch 应运而生。

本文将为你详细介绍 npm 包 meili-cli-watch 的安装、配置及使用方法。

安装

使用 meili-cli-watch 之前,需要先进行安装,在终端中输入以下命令:

此命令将 meili-cli-watch 安装为你当前项目的依赖包。使用 --save-dev 参数能够将其保存为开发环境下的依赖项。

配置

安装完毕后,我们需要对其进行配置。配置文件的命名为 meili.config.js 文件,并放置在根目录下。

以下是一个基本的 meili.config.js 配置文件的示例:

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

配置项说明

  • watchDirs:需要监听的文件夹,支持 glob 表达式;
  • exts:需要监听的文件类型;
  • actions:文件改动时执行的命令;
  • ignored:需要忽略的文件夹。

actions 中的命令按照组的形式进行配置,组之间用逗号隔开,比如在文件变化时需要启动 npm 任务,可以在 actions 中添加 start 命令组,示例如下:

当你需要执行组合命令时,也可以使用 xq 的语法。

支持 TypeScript

meili-cli-watch 支持 TypeScript,只需要在 meili.config.js 中将文件类型 exts 配置为 .ts,.js 即可。当检测到 TypeScript 文件变化时,自动选择 tsc 命令编译 TypeScript 文件。

自定义文件类型

如需自定义文件类型,只需要将 exts 配置项修改为需要监听的文件类型即可,例如:

使用

配置完毕后,我们只需要在终端中输入以下命令即可启动监听:

这时候 meili-cli-watch 就开始监听你的文件夹啦!

特别说明

  • meili-cli-watch 默认监听的文件修改事件不包含文件夹变化,因为文件夹变化的事件通常意味着文件的增删改,不便于精细化的控制。如果需要监听文件夹变化,可以在 watchDirs 中同时写下文件夹路径和文件类型。
  • 当 meili-cli-watch 进程退出时,会自动清理注册的 file watcher 以及所有 subprocesses。

总结

此篇文章主要介绍了 npm 包 meili-cli-watch 的安装、配置及使用方法。我相信,本文可以帮助大家更好地使用 meili-cli-watch,提高我们的开发效率。

示例代码请前往仓库查看:https://github.com/meili-inc/meili-cli-watch

欢迎 PR。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066f3c1d8e776d08040a2c

纠错
反馈