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

​

阅读本文，你将

• 明白​​**/*.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 语法

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​​ !

六、结束语

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

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