javascript Nuxt.js TypeScript Vue.js プログラミング 開発ノウハウ

Nuxt.js(Vue.js)のプロジェクトにHygenを導入して、コンポーネント作成時の定型コードを自動生成する方法を紹介

投稿日:


 

こんにちは、mabuiです。
最近個人で進めているプロジェクトでボイラープレートコード(書くのが必要な定型的なコード)を自動生成してくれるHygenというツールを導入したので、その紹介をします。
 

Hygenとはコマンドラインから設定しておいたファイルを生成してくれるツールです。
Vueで開発を進めていてコンポーネントを作る時、毎回TypeScriptの設定をして、cssメタ言語の設定をして、、、と定型的な作業が発生しがちだと思います。
そのほかにも定型的なjestのテストコードを用意して、storybookの設定追加して、と本質的でない作業はHygenをうまく設定することで省くことができます!🙌
 

下記作業はNuxt.js + TypeScriptの環境で進めていて、作成したコードはこちらのリポジトリに置いています。
mabuix/nuxt_template
 

インストール

インストールのコマンドです。

 

インストール後、こちらのコマンドでテンプレートを生成します。

 

生成されたテンプレートがこちらです。

 

ヘルプコマンドが生成されたので実行してみましょう。

 

yarn hygen generator new [ジェネレーター名]で新しいジェネレーターを生成することができます。
今回はコンポーネントの生成をhygenで行いたいのでcomponentジェネレーターを作成します。

 

hello.ejs.tは不要なので削除しておきます。
コンポーネント作成用のジェネレーターができたので、開発に利用できるよう設定していきましょう。
 

ディレクトリの設定

その前にディレクトリ名が_templatesだと何用のファイルか分からなくなるため、ディレクトリ名の変更を行います。
ルートディレクトリ配下に.hygen.jsを作成することで設定を読み込んでくれます。
 

.hygen.js

 

上記を作成して、ディレクトリ名をhygen に変更しましょう。
 

コマンドプロンプト用の設定

hygenコマンド実行時に対話式にするための設定ファイルを作成します。
 

[ルートディレクトリ]/hygen/component/new/prompt.js

 

コンポーネント作成用の設定

Vueコンポーネントを作成する用のテンプレートファイルを用意します。
ヘッダーのメタ情報としてto:でテンプレートを出力するパスを指定でき、テンプレート内では先ほどprompt.jsで設定したnameを指定して<%= name %>の形式で変数を使用することができます。
また、ヘルパーオブジェクトhを使用して変数に変更を加えることも可能です。
詳細は公式ドキュメントを参照してください。
https://www.hygen.io/templates
 

[ルートディレクトリ]/hygen/component/new/vue.ejs.t

 

同じ方法でjest,storybookのテンプレートも作成していきます。
これらのテンプレートを用意したプロジェクトをgithubで作成しましたので参照してみてください。
mabuix/nuxt_template
 

テンプレートの生成

上記までのファイルを用意して下記対話式コマンドを実行すればテンプレートが生成されます!🍺
yarn hygen component new
 

こちらをpackage.jsonscriptsに記述して短縮コマンドで実行できるようにしておきましょう🙌

 

実行結果

 

-javascript, Nuxt.js, TypeScript, Vue.js, プログラミング, 開発ノウハウ
-, , , ,

Copyright© , 2019 All Rights Reserved Powered by STINGER.