前端工程化~强大的glob语法

glob 在正则出现之前就有了,主要用于匹配文件路径,例如大名鼎鼎的 gulp 就使用了 glob 规则来匹配、查找并处理各种后缀的文件。在前端工程化的过程中,不可避免地会用 Node.js 来读取文件,例如想找到 src 目录下所有 jsjsx 文件,代码应该怎么写呢?首先安装依赖包:

yarn add glob

然后 3 行代码搞定:

const glob = require('glob')
const files = glob.sync('src/**/*.js{,x}')
console.log(files)

有没有感觉很强大呢?更重要的是 glob 语法在命令行就支持,不需要安装任何依赖,例如老板让你创建 a1.jsa9.jsb1.jsb9.js 这 18 个测试文件的话,怎么操作?一个个创建的话太傻了,glob 一句话就搞定:

$ touch {a,b}{1..9}.js
$ ls
a1.js a3.js a5.js a7.js a9.js b2.js b4.js b6.js b8.js
a2.js a4.js a6.js a8.js b1.js b3.js b5.js b7.js b9.js

更更更重要的是,glob 的语法非常简单,只要记住下面7个符号代表的含义就能掌握了:

  • 基础语法:/*?[]
  • 拓展语法:**{}()

接下来就逐个解释一下:

基础语法

分隔符和片段

概念:分隔符是/,通过split('/') 得到的数组每一项是片段。

示例:

  • src/index.js 有两个片段,分别是 srcindex.js
  • src/**/*.js 有三个片段,分别是 src***.js

单个星号

概念:单个星号* 用于匹配单个片段中的零个或多个字符。

示例

  • src/*.js 表示 src 目录下所有以 js 结尾的文件,但是不能匹配 src 子目录中的文件,例如 src/login/login.js
  • /home/*/.bashrc 匹配所有用户的 .bashrc 文件

需要注意的是,* 不能匹配分隔符/,也就是说不能跨片段匹配字符。

问号

概念:问号 ?匹配单个片段中的单个字符。

示例

  • test/?at.js 匹配形如 test/cat.jstest/bat.js 等所有3个字符且后两位是 at 的 js 文件,但是不能匹配 test/flat.js
  • src/index.?? 匹配 src 目录下以 index 打头,后缀名是两个字符的文件,例如可以匹配 src/index.jssrc/index.md,但不能匹配 src/index.jsx

中括号

概念:同样是匹配单个片段中的单个字符,但是字符集只能从括号内选择,如果字符集内有-,表示范围。

示例:

  • test/[bc]at.js 只能匹配test/bat.jstest/cat.js
  • test/[c-f]at.js 能匹配 test/cat.jstest/dat.jstest/eat.jstest/fat.js

惊叹号

概念:表示取反,即排除那些去掉惊叹号之后能够匹配到的文件。
示例:

  • test/[!bc]at.js不能匹配 test/bat.jstest/cat.js,但是可以匹配 test/fat.js
  • !test/tmp/**' 排除 test/tmp 目录下的所有目录和文件

扩展语法

基础语法非常简单好记,但是功能非常局限,为了丰富 glob 的功能,衍生了下面三种扩展语法:

两个星号

概念:两个星号** 可以跨片段匹配零个或多个字符,也就是说**是递归匹配所有文件和目录的,如果后面有分隔符,即 **/ 的话,则表示只递归匹配所有目录(不含隐藏目录)。

示例:

  • /var/log/** 匹配 /var/log 目录下所有文件和文件夹,以及文件夹里面所有子文件和子文件夹
  • /var/log/**/*.log 匹配 /var/log 及其子目录下的所有以 .log 结尾的文件
  • /home/*/.ssh/**/*.key 匹配所有用户的 .ssh 目录及其子目录内的以.key 结尾的文件

大括号

概念:匹配大括号内的所有模式,模式之间用逗号进行分隔,支持大括号嵌套,支持用.. 匹配连续的字符,即{start..end} 语法。

示例:

  • a.{png,jp{,e}g} 匹配 a.pnga.jpga.jpeg
  • {a..c}{1..2} 匹配 a1 a2 b1 b2 c1 c2

注意:{}[] 有一个很重要的区别:如果匹配的文件不存在,[]会失去模式的功能,变成一个单纯的字符串,而 {} 依然可以展开。

小括号

概念:小括号必须跟在 ?*+@! 后面使用,且小括号里面的内容是一组以 | 分隔符的模式集合,例如:abc|a?c|ac*

示例:

  • ?(pattern|pattern|pattern):匹配0次或1次给定的模式
  • *(pattern|pattern|pattern):匹配0次或多次给定的模式
  • +(pattern|pattern|pattern):匹配1次或多次给定的模式
  • @(pattern|pattern|pattern):严格匹配给定的模式
  • !(pattern|pattern|pattern):匹配非给定的模式

应用场景

webpack 多页面应用自动打包配置

在一个 webpack 项目中,假如我们有多个入口,每个入口都有一个 index.html 模板和 index.js 文件,而且这个入口是动态变化的,不希望每增加一个入口就改 webpack.config.js 配置文件,应该怎么办呢?

此时可以约定在 src 下面创建的文件夹,只要里面有 index.js,我们就把它当做一个入口文件进行打包:

src
├── detail
│   ├── index.html
│   └── index.js
├── home
│   ├── index.html
│   └── index.js
├── login
│   ├── index.html
│   └── index.js
├── shop
│   ├── index.html
│   └── index.js

用 glob 很快就能写出下面的自动打包代码:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const glob = require('glob')

// 动态生成 entry 和 html-webpack-plugin
function getMpa() {
  const entry = {}, htmlPlugins = []
  const files = glob.sync('src/*/index.js')
  files.forEach((file) => {
    const filename = file.split('/')[1]
    entry[filename] = path.join(__dirname, file)
    htmlPlugins.push(
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${filename}/index.html`),
        filename: `${filename}.html`,
        chunks: [filename],
      })
    )
  })
  return { entry, htmlPlugins }
}
const mpa = getMpa()

// 动态的配置文件
module.exports = {
  entry: mpa.entry,
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash:6].js',
  },
  plugins: [...mpa.htmlPlugins],
}

这样,无论增加多少个入口,webpack.config.js 都不用变。

手写一个约定大于配置的 Node.js 框架

egg.js 是一款优秀的 Node.js 企业级开发框架,就应用了约定大于配置的思想,例如:

  • 约定一个中间件是一个放置在 app/middleware 目录下的单独文件
  • 约定了 app/router.js 文件用于统一所有路由规则
  • 约定 Service 文件必须放在 app/service 目录,可以支持多级目录,访问的时候可以通过目录名级联访问

因为一个大规模的团队需要遵循一定的约束和约定,开发效率才更高,有了这些约定之后,我们就可以利用 glob 写出匹配规则,找到用户放到指定目录下的文件并进行动态加载了,一个最基础的 load 函数如下:

function load(folder, options) {
    const extname = options.extname || '.{js,ts}'
    return glob.sync(require('path').join(folder, `./**/*.js`)).forEach((item) => require(item))
}

使用 glob,配合相应的规范,例如 RESTful,我们自己也能封装一个简易的、基于约定的 Node.js 框架了。

放在最后

赠与小伙伴们的一点点小福利~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270