持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
📖阅读本文,你将
-
明白
**/*.js
究竟是啥语法。 -
知道它从何而来。
-
了解两款实用的解析这种语法的
js
库;
一、关于一种语法的困惑
毛毛是个两年经验的前端,最近她有个“小确烦”。(微小而确定的烦恼)
有一种语法,她大概知道它们是啥意思,但她又不完全确定;问了好几个同事,大家都是一副 “差不多就是这个意思” 的态度,这让凡事盘根问底的毛毛感到很烦闷。
这个语法长这样:
node_modules
**/*.js
dist/**/package.json
常见吗?眼熟吗?
.gitignore
里、.eslintignore
里、 jsconfig.json
里、webpack
配置里、vite
配置里,VSCode
查找文件的“包含的文件”搜索框里……
“这玩意儿似乎无处不在,谁能告诉我它们是啥吗?有啥规范吗?”毛毛暗下决心,她一定要弄清楚这个细节,因为细节里往往藏着魔鬼。
不卖关子,先揭晓谜底:
这种语法叫 glob
。
让我们从头说起。
二、起源
虽然 glob
语法在当前的前端项目里似乎无处不在,但它其实不是来源于 “前端”。甚至不是后端。
而是来源于 linux
;
1975 年发行的 Unix V6
版本中,提供了一个安装路径为 etc/glob
的命令工具。
这个 glob
工具,允许使用者通过 “通配符” 来匹配目录和文件。
在后来的演进中,它开始渐渐成为 linux shell
的一部分,现在你几乎在所有的 linux
系统中都可以轻松快捷地使用它;
因为其 “实用、好用”,所以渐渐出圈,因此,即便我们使用的是 windows
,在前端项目里也有工具库可以轻松的解析这种语法。
三、语法
有些人觉得:“这种语法只有一种语法,那就是写星号。”
其实这是对它最大的误解!人家可是有一套完善的规则的!
3.1 语法
字符 | 解释 |
---|---|
* | 匹配任意长度任意字符 |
** | 代表0或多个层级的目录 |
? | 匹配任意单个字符 |
[list] | 匹配指定范围内(list)任意单个字符,也可以是单个字符组成的集合 |
[^list] | 匹配指定范围外的任意单个字符或字符集合 |
[!list] | 同[^list] |
{str1,str2,...} | 匹配 srt1 或者 srt2 或者更多字符串,也可以是集合 |
3.2 专用字符集
- [:alnum:] 任意数字或者字母
- [:alpha:] 任意字母
- [:space:] 空格
- [:lower:] 小写字母
- [:digit:] 任意数字
- [:upper:] 任意大写字母
- [:cntrl:] 控制符
- [:graph:] 图形
- [:print:] 可打印字符
- [:punct:] 标点符号
- [:xdigit:] 十六进制数
- [:blank:] 空白字符(未验证)
3.3 例子
先看看 ?
和 *
,这是最常用的。
?.js
# 可以命中 a.js、b.js, 但无法命中 ab.js
*.js
# 可以命中 a.js、ab.js、b.js
a?.js
# 可以命中 ac.js 和 ab.js,无法命中 a.js
(这里最开始写错了,感谢 Mingyuan 同学指正)
再看看 [...]
方括号匹配;
[ab].js
# 只能匹配 a.js和b.js
# 不能匹配到 ab.js
*[ab].js
# 可以匹配到 a.js、b.js、ab.js、aba.js...
再看看 [!...]
和 [^...]
,这两种语法完全等价。
[!a].js
# 匹配除了 `a.js` 以外的所有文件
再看看 {...}
大括号模式。
b{u,i}g.js
# 可以命中 bug.js 和 big.js
最后看看 {a..b}
大括号范围模式。
{1..3}.js
# 可以命中 1.js、2.js、3.js
ok!看到这里,你已经大概知道它们的核心语法了,现在遇到一些特定的需求时,你也可以轻松驾驭了。
那么,前端有哪些可以解析 glob
语法的库呢?
四、node-glob
安装方式:
yarn add glob -D
使用方式:
var glob = require("glob")
glob("**/*.js", function (er, files) {
// files 就是它模糊查找到的文件咯
})
通过前面三节的描述,要明白这个库的使用,丝毫不费吹灰之力,不是吗?
五、fast-glob
开始进入内卷 Time;
只看名字就知道,这是一款比 node-glob
速度更快的 glob
工具库;
一些大家所熟知的比如 eslint
、vite
等工具都是用了 fast-glob
作为依赖。
安装:
yarn add fast-glob -D
使用:
const fg = require('fast-glob');
const entries = await fg(['.editorconfig', '**/index.js']);
看到这,我忍不住要大喊一声:fgnb
!
六、结束语
我是春哥
。
大龄前端打工仔,依然在努力学习。
我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼🐟。
你可以在公众号里找到我:前端要摸鱼
。