前言
在前端开发中,我们经常需要自动化构建,并自动检测代码的变化,这时候自动化构建工具就派上用场了。但是,传统的构建工具均需要手动启动构建任务,造成了较大的人力浪费。为了解决这个问题,meili-cli-watch 应运而生。
本文将为你详细介绍 npm 包 meili-cli-watch 的安装、配置及使用方法。
安装
使用 meili-cli-watch 之前,需要先进行安装,在终端中输入以下命令:
npm install meili-cli-watch --save-dev
此命令将 meili-cli-watch 安装为你当前项目的依赖包。使用 --save-dev
参数能够将其保存为开发环境下的依赖项。
配置
安装完毕后,我们需要对其进行配置。配置文件的命名为 meili.config.js 文件,并放置在根目录下。
以下是一个基本的 meili.config.js 配置文件的示例:
-- -------------------- ---- ------- -------------- - - ---------- ---------- ----- ---------- -------- - ------ ---- --- ------- ---------- ------ ----------------- ------ ------ --------- ------ ----- -------- ----- ---- --- ------ ---- --- -------- -- -------- ------------------- ------------ -
配置项说明
watchDirs
:需要监听的文件夹,支持 glob 表达式;exts
:需要监听的文件类型;actions
:文件改动时执行的命令;ignored
:需要忽略的文件夹。
actions
中的命令按照组的形式进行配置,组之间用逗号隔开,比如在文件变化时需要启动 npm 任务,可以在 actions
中添加 start 命令组,示例如下:
actions: { start: 'npm run start', onRestart: ['echo "Restarting..."', 'sleep 0.5'], onChange: ['echo "File changed: %s"', 'npm run lint', 'npm run build'], }
当你需要执行组合命令时,也可以使用 xq 的语法。
支持 TypeScript
meili-cli-watch 支持 TypeScript,只需要在 meili.config.js 中将文件类型 exts 配置为 .ts,.js
即可。当检测到 TypeScript 文件变化时,自动选择 tsc 命令编译 TypeScript 文件。
自定义文件类型
如需自定义文件类型,只需要将 exts 配置项修改为需要监听的文件类型即可,例如:
exts: '.ts,.js,.wxml,.wxss',
使用
配置完毕后,我们只需要在终端中输入以下命令即可启动监听:
meili-cli-watch
这时候 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