Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >node中的glob使用

node中的glob使用

原创
作者头像
帅的一麻皮
修改于 2020-11-25 10:17:59
修改于 2020-11-25 10:17:59
6.1K00
代码可运行
举报
文章被收录于专栏:前端与Java学习前端与Java学习
运行总次数:0
代码可运行

今天在工作看老大写的项目的代码过程中看见了一段代码用到了glob这个模块,于是来记录一下他的基本用法。

1-glob介绍

1.1-npm官网:https://www.npmjs.com/package/glob

1.2-说明:node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件.,这个glob工具基于javascript.它使用了 minimatch 库来进行匹配。总的来说有了它我们可以利用它匹配出我们想要的目录下的一些文件,在一些大型项目中做一些配置的时候应该还是蛮有用的,比如我们在配置webpack的入口文件的时候当入口文件过多时。

2-使用步骤

2.1-下载包:

代码语言:shell
AI代码解释
复制
npm i glob

2.2-在用到的文件中引入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var glob =require("glob")

2.3-路径中的某一段可以使用下面的这些字符表示,他们各自都有各自的作用:

1. * : 匹配该路径段中0个或多个任意字符:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取js目录下的所有js文件.(不包括以'.'开头的文件)
glob("js/*.js",function (er, files) {
    console.log(files)
})

2. ? : 匹配该路径段中1个任意字符:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取js目录下所有名字只有1个字的js.
glob("js/?.js",function (er, files) {
    console.log(files)
})

3. [...] : 匹配该路径段中在指定范围内字符:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取js目录下a开头,第二个字符为0-3之间(包括0和3)的js(a03.js不能被匹配到) 注意不能组合,只能是其中一个字符
glob("js/a[0-3].js",function (er, files) {
    console.log(files)
})

4. *(pattern|pattern|pattern) : 匹配括号中多个模型的0个或多个或任意个的组合,注意|前后不能有空格

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取js目录下a.js,a1.js,b.js,或者a,a1,b这几个字符的组合的js,比如ab.js
glob("js/*(a|a1|b).js",function (er, files) {
    console.log(files)
})

更多匹配符就不一一记录了,具体可以参照文章:https://www.cnblogs.com/liulangmao/p/4552339.html

3-利用glob来快速配置webpack的入口文件

前面讲到的都是异步的方法,传入一个回调,当获取到匹配的文件的时候执行回调.如果需要同步的获取文件列表,我们再来学习一个glob的api:var files = glob.sync(pattern, [options])

这个项目是egg-react-ssr 服务端渲染框架,可以看到我们的几个页面如下,那么我们需要给对应页面配置webpack多个入口

具体步骤:

接下来我们可以打印一下入口对象entry:

现在我们就直接将我们的entry对象传入到webpack配置中就好啦~

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
webpack打包速度和性能再次优化
一. 改单dll为双dll 因为上图原因,使用CommonsChunkPlugin时,导致其打包出来的vendors.js内的模块ID会因为其他文件引用模块数量的变化而变化。 所以现利用DllPlug
smy
2018/04/03
2.1K0
webpack打包速度和性能再次优化
认识 Glob Pattern
在计算机编程中,Glob Pattern 是通配符匹配模式,它利用通配符来匹配一组文件或目录。
恋喵大鲤鱼
2024/07/22
1650
【架构师(第十七篇)】脚手架之 ejs 和 glob 的使用
之前已经发过这个流程图,下面来回顾一下,特别需要注意的是项目和组件的流程有一些区别。
一尾流莺
2022/12/10
1.3K0
【架构师(第十七篇)】脚手架之 ejs 和 glob 的使用
Webapck5核心打包原理全流程解析
Webpack在前端前端构建工具中可以堪称中流砥柱般的存在,日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。
19组清风
2021/11/18
5400
Webapck5核心打包原理全流程解析
glob 介绍
glob 最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如,lib/**/*.js 匹配 lib 目录下所有的 js 文件。
前端GoGoGo
2018/08/24
1.3K0
Gulp使用指南
发上来好像格式都变了,有需要的可以给留言,我把为知笔记发给大家!大家如果看着费劲就拉到最后直接看图片部分! 一.基本介绍 gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。   gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试
hbbliyong
2018/03/06
1.3K0
Gulp使用指南
Python glob 模块全解析:轻松处理文件路径匹配
在 Python 中,glob 模块 主要用于 查找符合特定规则的文件路径,它支持使用通配符(如 *、? 和 [])来进行灵活的文件搜索。相比于 os.listdir(),glob 更适合按模式匹配文件,非常适用于批量处理文件。
不止于python
2025/03/17
2890
Python glob 模块全解析:轻松处理文件路径匹配
Vue多页面开发案例解析
Vue 是很好用,但是以往的都是单页面应用,这就导致了一些传统的项目移植困难,一些用了 JQ 的插件的等等写法都要改变。也还用专门找到相对于的 Vue 的插件才行,这次的 Cli 3.0 可以在原来项目的基础上直接移植,非常方便。
芈渡
2021/01/08
1.6K0
Vue多页面开发案例解析
【初学者笔记】前端工程化必须要掌握的 webpack
现在学习的是 webpack4 的最新版,新建文件夹,npm init -y 初始化一下,然后执行下面命令进行安装,需要同时安装 webpack 和 webpack-cli。
一尾流莺
2022/12/10
6570
【初学者笔记】前端工程化必须要掌握的 webpack
glob库函数使用方法
glob模块是用来获取文件路径的一个常用模块。它可以根据用户指定的路径来搜索文件,然后返回符合规则的文件路径列表。
很酷的站长
2023/10/31
5360
glob库函数使用方法
Gulp基本用法
Gulp是一个模块化打包工具。 Gulp本身只有几个入口,支持他拥有强大功能的是各种各样的插件。 Gulp的使用看起来非常简单,只需要一个一个任务链式执行就可以了,它还可以与Webpack结合起来使用 比如将Webpack作为一个插件来处理ES6转换为ES5的操作。 下面记录一下Gulp的API以及一些用到的插件。
epoos
2022/06/06
7670
gulp入门(小白级别)
在该项目路径下,我们独立安装gulp:npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件,如下图:
celineWong7
2020/11/05
1.4K0
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别
这几天,都遇到过有人问过相似的问题,就是用vue和webpack搭建目录的时候,怎么把单页面应用的配置改成多文件应用,或者是怎么把多文件应用的配置改成单文件应用。这个情况,我之前有处理过,公司的同事教过我,我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好,写错了,欢迎指出,大家一起进步。
守候i
2018/08/22
1.2K0
了不起的 tsconfig.json 指南
在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面都有哪些优秀配置?如何配置一个合理的 tsconfig.json 文件?本文将全面带大家一起详细了解 tsconfig.json 的各项配置。
pingan8787
2020/06/02
2.8K0
多角度解析Webpack5之Loader核心原理
日益繁杂的前端工程化中,围绕Webpack的前端工程化在前端项目中显得格外重要, 谈到webpack必不可少的就会提起Loader机制。
19组清风
2022/02/28
1.2K0
多角度解析Webpack5之Loader核心原理
Webpack入门到精通(AST、Babel、依赖)
从名字上就能看出他们使用的环境了,需要注意的是env,他的作用是将最新js转换为es6代码。预设是babel插件的组合,我们可以看下package.json(截取一部分):
落落落洛克
2021/09/17
6000
Webpack入门到精通(AST、Babel、依赖)
深度解读Webpack中的loader原理
webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢?
gogo2027
2022/10/21
9130
手摸手实现一个webpack
在平时的工作和学习过程中,webpack 是一个重要的知识点,本文通过分析 webpack 的打包原理,最终带大家实现一个简易版的 webpack。
astonishqft
2022/05/10
4180
构建 webpack5 知识体系【近万字总结】
我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。
若川
2022/11/11
1.6K0
构建 webpack5 知识体系【近万字总结】
【Webpack】632- 了不起的 Webpack 构建流程学习
Webpack 是前端很火的打包工具,它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有模块打包成一个或多个 bundle。
pingan8787
2020/06/24
1.1K0
相关推荐
webpack打包速度和性能再次优化
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验