Posted at

Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト

最近Nuxt.jsでWebアプリを作ってるけど、

度重なる改修でVueコンポーネントが乱立。。

使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。


スクリプトはこんな感じ

#!/bin/bash

# vueコンポーネントの一覧を取得
FILES=`find components -name "*.vue"`
for i in $FILES; do
# 全体からコンポーネントをインクルードしている行の数を取得
NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"`

# ファイル名と見つけた件数を表示
echo "** ${NUM}: ${i}"

# grepした結果を表示(確認用)
grep -r "$i" *
echo ""
done

こんな感じで出力されるので、** 0:で始まるコンポーネントを削除していけばOK。

** 1: components/Hero.vue

pages/index.vue:import Hero from "~/components/Hero.vue";

** 0: components/OgpUserStock.vue

** 0: components/Card.vue

** 3: components/atom/TotalNumBooks.vue
pages/clip/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";
pages/read/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";
pages/stack/_uid.vue:import TotalNumBooks from "~/components/atom/TotalNumBooks.vue";

確認用にgrepの結果を出しているけど、コメントアウトしたり、


NUMが0件のときは、結果を表示しないようにすればいい感じ。

もしくは、| grep "** 0:"で結果をgrepするとかでもいいかも。


appとかディレクトリを変えてる場合

こんな感じにapp配下とかに場所を変えている場合は、

app/

pages/
components/

こんな感じで、findする場所を変えればOK♪

#!/bin/bash

FILES=`find app/components -name "*.vue" | sed 's:app/::g'`
for i in $FILES; do
NUM=`grep -r "$i" app/* | wc -l | sed -e "s:[^0-9]*::g"`
echo "** ${NUM}: ${i}"
grep -r "$i" app/*
echo ""
done

以上!!


こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!

積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、

公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪