background
In front-end development, we often see a configuration syntax, which generally appears in gitignore, webpack configuration, and vscode when searching for files, as follows:
?.js
**/*.js
dist/**/*.js
This syntax is actually called glob.
glob history
glob comes from Linux.
The unix v6 version released in 1975 provided a command tool with the installation path etc/glob. This glob tool allows users to match directories and files through "wildcards". In the subsequent evolution, it gradually became a part of the Linux shell. Now you can use it easily and quickly in almost all Linux systems; because of its "practical and easy-to-use", it gradually became out of the circle. Therefore, even if we Using Windows, there are also tool libraries in front-end projects that can easily parse this syntax.
glob syntax
1. Basic grammar
* 匹配任意长度任意字符
** 代表0或多个层级的目录
? 匹配任意单个字符
[list] 匹配指定范围内（list）任意单个字符，也可以是单个字符组成的集合
[^list] 匹配指定范围外的任意单个字符或字符集合
[!list] 同[^list]
{str1,str2,...} 匹配 srt1 或者 srt2 或者更多字符串，也可以是集合
() 小括号必须跟在 ?、*、+、@、! 后面使用，且小括号里面的内容是一组以 | 分隔符的模式集合，例如：abc|a?c|ac*。
2. Special character set
[:alnum:] 任意数字或者字母
[:alpha:] 任意字母
[:space:] 空格
[:lower:] 小写字母
[:digit:] 任意数字
[:upper:] 任意大写字母
[:cntrl:] 控制符
[:graph:] 图形
[:print:] 可打印字符
[:punct:] 标点符号
[:xdigit:] 十六进制数
[:blank:] 空白字符（未验证）
Example
- src/*.js represents all files ending with js in the src directory, but cannot match files in the src subdirectory, such as src/login/login.js
- test/?at.js matches all 3-character js files such as test/cat.js, test/bat.js, etc., and the last two characters are at, but cannot match test/flat.js
- test/[bc]at.js can only match test/bat.js and test/cat.js
- test/[cf]at.js can match test/cat.js, test/dat.js, test/eat.js and test/fat.js
- test/[!bc]at.js cannot match test/bat.js and test/cat.js, but it can match test/fat.js
- !test/tmp/**' excludes all directories and files under the test/tmp directory
- /var/log/** matches all files and folders in the /var/log directory, as well as all subfiles and subfolders in the folder
- /var/log/**/*.log matches all files ending with .log in /var/log and its subdirectories
- a.{png,jp{,e}g} matches a.png, a.jpg, a.jpeg
- {a…c}{1…2} matches a1 a2 b1 b2 c1 c2
- ?(pattern|pattern|pattern): Match the given pattern 0 or 1 times
Parse glob syntax in node
1、node-glob
// 1、安装方式：
yarn add glob -D
// 2、使用方式：
var glob = require("glob")
glob("**/*.js", function (er, files) {
// files 就是它模糊查找到的文件
})
const jsfiles = await glob('**/*.js', {
ignore: 'node_modules/**' })
const images = await glob(['css/*.{png,jpeg}', 'public/*.{png,jpeg}'])
2、fast-glob
This is a glob tool library that is faster than node-glob. Some well-known tools such as eslint and vite use fast-glob as a dependency.
// 1、安装：
yarn add fast-glob -D
// 2、使用：
const fg = require('fast-glob');
const entries = await fg(['.editorconfig', '**/index.js'], {
dot: true });
fg(patterns, [options])
fg.async(patterns, [options])
fg.glob(patterns, [options])
dot option: For example, src/.*will match the file src/.ignore file, but src/*will not match the file, because * will not match files starting with the . character.
You can set dot: true in options to let glob treat . as a normal character.
3、globby
Based on fast-glob but adds a bunch of useful features.
// 1、安装：
yarn add globby -D
// 2、使用：
import {
globby} from 'globby';
const paths = await globby(['*', '!cake']);
console.log(paths);
//=> ['unicorn', 'rainbow']
https://github.com/sindresorhus/globby