【一库】`**/*.js` 是啥语法?谁能解析?速学👺

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情

📖阅读本文,你将

  • 明白 **/*.js 究竟是啥语法。

  • 知道它从何而来。

  • 了解两款实用的解析这种语法的 js 库;

一、关于一种语法的困惑

毛毛是个两年经验的前端,最近她有个“小确烦”。(微小而确定的烦恼)

有一种语法,她大概知道它们是啥意思,但她又不完全确定;问了好几个同事,大家都是一副 “差不多就是这个意思” 的态度,这让凡事盘根问底的毛毛感到很烦闷。

这个语法长这样:

node_modules

**/*.js

dist/**/package.json

常见吗?眼熟吗?

.gitignore 里、.eslintignore 里、 jsconfig.json 里、webpack 配置里、vite 配置里,VSCode 查找文件的“包含的文件”搜索框里……

20220527-01.jpg

“这玩意儿似乎无处不在,谁能告诉我它们是啥吗?有啥规范吗?”毛毛暗下决心,她一定要弄清楚这个细节,因为细节里往往藏着魔鬼。

不卖关子,先揭晓谜底:

这种语法叫 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 工具库;

一些大家所熟知的比如 eslintvite 等工具都是用了 fast-glob 作为依赖。

安装:

yarn add fast-glob -D

使用:

const fg = require('fast-glob');

const entries = await fg(['.editorconfig', '**/index.js']);

看到这,我忍不住要大喊一声:fgnb !

六、结束语

我是春哥
大龄前端打工仔,依然在努力学习。
我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼🐟。

你可以在公众号里找到我:前端要摸鱼