发现一个搜索文件的前端神库,彻底解放你的双手

科技   2024-11-02 09:30   广东  

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

最近在写一个工具,这个工具是写给团队中的所有项目使用的,大概功能就是:找出项目中某一个特定的 CSS 文件,并进行一系列的操作

其实无非就分几步:

  • 1、遍历项目中所有 CSS 文件
  • 2、获取每一个 CSS 文件的内容
  • 3、判断是否包含特定的内容,如果包含就说明这个 CSS 文件就是目标文件

下面是一个简化版的项目目录


我们想找的目标 CSS 文件是 TailwindCSS 入口 CSS 文件,这个文件的特征就是包含@tailwind base 内容


找文件好麻烦

但是我总感觉靠自己去找项目中所有 CSS 文件好麻烦,我就在想,有没有一个库,我只需要指定路径,或者 CSS 后缀,这个库就可以帮我找出项目中所有 CSS 文件的路径

还真有,就是这个库:fast-glob,你只需要传入'**/*.css'、'src/**/*.css'、'src/**/*.json'这样的路径,它就可以帮你查出所有符合条件的文件路径

更多的方法、路径和参数,可以查看这个库的文档:https://www.npmjs.com/package/fast-glob




Vitest、Jest这些测试库,都是通过 fast-glob 去寻找项目中的所有 **.test.ts 文件的



下面是 fast-glob 的使用方式

npm i fast-glob

可以看到,当我传入 '**/*.css' ,它会帮我找出所有 CSS 文件路径


有了这个库,再配合fs、path,我就可以完成我这个库的需求啦!


结语

我是林三心,感谢您的观看阅读,如果对你有帮助的话,请点点关注呗~想加学习群的请关注我,回复“加群”

前端之神
一位前端小菜鸡,写过400多篇原创文章,全网有6w+个前端朋友,梦想是成为”前端之神“~
 最新文章