1分でわかるwebpackでよく使われるglobuleの使い方

globuleとは

ワイルドカードglobを簡単に使えるnpmのライブラリ。

npm i globule

例えば以下のような構造の場合…

.
├── index.js
├── package-lock.json
├── package.json
├── node_modules
└── src
    ├── bar.js
    ├── dir
    │   └── baz.js
    └── foo.js

例えば以下のコードで指定したファイルを取得できる。

// index.js
const globule = require('globule')
const filepaths = globule.find('src/**/*.js')
$ node index.js
[ 'src/bar.js', 'src/dir/baz.js', 'src/foo.js' ]

globule.find

第2引数に{srcBase: src}を指定するとsrcディレクトリを基準にできる。

const globule = require('globule')
const filepaths = globule.find('*.js', {srcBase: 'src'})
console.log(filepaths)
// [ 'bar.js', 'foo.js' ]

第2引数に{matchBase:true}を指定すると子ディレクトリも対象になる。

const globule = require('globule')
const filepaths = globule.find('*.js', {srcBase: 'src', matchBase: true})
console.log(filepaths)
// [ 'bar.js', 'dir/baz.js', 'foo.js' ]

「prefixBase: true」を付けるとsrcBaseも含むことができる。

const globule = require('globule')
const filepaths = globule.find('*.js', {srcBase: 'src', prefixBase: true})
console.log(filepaths)
// [ 'src/bar.js', 'src/foo.js' ]

globule.isMatch

第1引数のパターンが第2引数のパスにマッチしているかどうかをbooleanで返す。

src/foo.jsの場合は第3引数に{matchBase: true}を指定しないとマッチしないので注意。

const globule = require('globule')
const filepaths1 = globule.isMatch('*.js', 'foo.jsx')
const filepaths2 = globule.isMatch('*.js', ['foo.js', 'bar.txt'])
const filepaths3 = globule.isMatch('*.js', 'src/foo.js')
const filepaths4 = globule.isMatch('*.js', 'src/foo.js', {matchBase: true})
console.log(filepaths1) // false
console.log(filepaths2) // true
console.log(filepaths3) // false
console.log(filepaths4) // true

globule.findMapping

srcとdestのパスを作成するのに便利なメソッド。

const globule = require('globule')
const filepaths = globule.findMapping('*.js', {
  srcBase: 'src',
  destBase: 'dest',
  matchBase: true,
})
console.log(filepaths)
// [
//   { src: [ 'src/bar.js' ], dest: 'dest/bar.js' },
//   { src: [ 'src/dir/baz.js' ], dest: 'dest/dir/baz.js' },
//   { src: [ 'src/foo.js' ], dest: 'dest/foo.js' }
// ]

globule - npm