tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

正規表現を使ってディレクトリ内のファイルをrequire出来るようにする

requireでは、ファイル名を直接指定する必要がある。

require

const hogehoge = require('./hoge/hogehoge.js')

たまーに動的に使いたいときがある(NuxtJSでVeeValidateでカスタムルール作るときとか)。
こう使ってたりすることが多い。

names.forEach(name => require(`./hoge/${name}.js`))

これだとnamesはどこで作るのか迷う。余談だがNuxtJSは設定より規約を重視してるので規約をつくった方がよい。だからnames作りたくない

require.context

独自のコンテキストを作れる。早速使い方。

const context = require.context('./hoge/', true, /\.js$/)
context.keys().forEach((key) => {
  // const hoge = require(`./hoge/{key}`) これとほぼ同じ(これじゃ実際動かない
  const hoge = context(key).default
})

左からディレクトリパス、サブディレクトリも検索するかどうか、ファイルを照合する正規表現

これをうまく使えばNuxtJSのpagesでroutingを生成するように規約ベースでなんやかんや出来る!

[参考]
Dependency Management | webpack