当我们在前端开发中,需要对某些目录或文件进行批量处理时,往往会使用到 glob 工具,而 bs-glob 则是对 glob 的一个封装,提供了一些更加方便的接口和相应的扩展功能。本文就来介绍一下怎么使用 bs-glob 这个 npm 包。
npm 安装
使用 npm 安装 bs-glob 包非常简单,只需要在命令行中输入以下指令即可:
npm install bs-glob --save
其中:
npm install
表示使用 npm 安装某个包。bs-glob
是一个 npm 包的名称。--save
参数表示将该包加入到当前项目的依赖中。
当然,如果你使用的是 yarn,也可以用以下指令安装该包:
yarn add bs-glob
glob 的语法
在介绍如何使用 bs-glob 之前,我们需要先了解一下 glob 的一些基本语法。
glob 是一个类似正则表达式的文本模式匹配工具,它用来匹配文件路径和文件名。其中,glob 中包含以下一些特殊字符:
*
表示0个或多个字符。?
表示一个字符。[]
表示可以出现括号内任意一个字符。!
表示要排除的。
除此之外,还可以使用 /
来表示路径分隔符。
例如:
*.js
匹配所有的以.js
结尾的文件。?a.js
匹配所有文件名为 2 个字符,第一字符为任意,第二字符为a
的 js 文件。src/*.js
匹配src
目录下所有的.js
文件。src/**/*.js
匹配src
目录下所有的.js
文件(包括子目录中的)。
bs-glob 的用法
bs-glob 提供了一个 glob
函数,可以方便地对文件和目录进行匹配,其参数和 glob 函数的参数基本相同。下面介绍一下如何使用 bs-glob 模块。
匹配文件
如果需要匹配某些特定的文件,则可以直接传入文件路径进行匹配。比如:
const glob = require('bs-glob'); const files = glob.sync('./src/main.js'); console.log(files); // ['./src/main.js']
上面代码中,glob.sync
函数返回一个数组,表示匹配到的文件路径。其中 ./src/main.js
为需要匹配的文件路径。
如果希望匹配某些特定扩展名的文件,则可以使用 *
来进行匹配。例如:
const files = glob.sync('./src/*.js'); console.log(files); // ['./src/main.js', './src/utils.js']
上面代码中,./src/*.js
表示匹配所有以 .js
结尾的文件。
此外,还可以使用 **
来匹配所有子目录下的文件。例如:
const files = glob.sync('./src/**/*.js'); console.log(files); // ['./src/main.js', './src/libs/lib.js', './src/utils.js']
这里的 **
表示匹配 ./src/
下的所有子目录。
匹配目录
如果希望匹配某些目录,则只需要传入对应目录的路径即可。例如:
const dirs = glob.sync('./src/*'); console.log(dirs); // ['./src/assets', './src/components', './src/libs', './src/main.js', './src/utils.js']
上面代码中,返回的数组中包含了 ./src/
下的所有文件和目录。由于传入的是 ./src/*
,因此只匹配了 ./src/
目录下的直接子元素,不包括子目录下的元素。
如果要匹配子目录下的所有文件和目录,则可以这样:
const dirs = glob.sync('./src/**/*'); console.log(dirs); // ['./src/assets', './src/assets/images', './src/components', './src/libs', './src/libs/lib.js', './src/main.js', './src/utils.js']
上面代码中,./src/**/*
表示匹配 ./src/
下的所有子目录和文件,包括子目录的子目录。
其他常用 API
除了 glob.sync
,bs-glob 还提供了其他一些常用的 API。下面列举了几个常用的 API:
glob.async(pattern, [options], [callback])
:异步匹配符合指定模式的文件或目录,可设置可选参数,也支持回调函数。glob.hasMagic(pattern, [options])
:返回一个 boolean 类型,表示是否匹配到指定模式的文件或目录。glob.cwd(cwd)
:设置当前工作目录。glob.base(base)
:设置相对路径的起始路径。
注意事项
当打包前端代码的时候,一定要注意不要打包 node_modules 目录下的代码,可以根据需要在 bs-glob 的匹配结果中进行过滤。
如果要匹配文件和目录的话,建议分开做匹配,以免混淆。
总结
bs-glob 提供了方便的 API,封装了 glob 的部分功能,并且在 glob 的基础上提供了一些方便的扩展功能。本文主要介绍了 bs-glob 的用法,并且说明了一些需要注意的地方。相信读完本文之后,大家可以更加方便地使用 bs-glob 来进行文件和目录的处理了。
参考链接
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600572f581e8991b448e9197