31
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

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)まで♪

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
31
Help us understand the problem. What are the problem?