こんにちは、mabuiです。
最近個人で進めているプロジェクトでボイラープレートコード(書くのが必要な定型的なコード)を自動生成してくれるHygenというツールを導入したので、その紹介をします。
Hygenとはコマンドラインから設定しておいたファイルを生成してくれるツールです。
Vueで開発を進めていてコンポーネントを作る時、毎回TypeScriptの設定をして、cssメタ言語の設定をして、、、と定型的な作業が発生しがちだと思います。
そのほかにも定型的なjestのテストコードを用意して、storybookの設定追加して、と本質的でない作業はHygenをうまく設定することで省くことができます！🙌
下記作業はNuxt.js + TypeScriptの環境で進めていて、作成したコードはこちらのリポジトリに置いています。
mabuix/nuxt_template
インストール
インストールのコマンドです。
|
1 2 |
yarn add hygen -D |
インストール後、こちらのコマンドでテンプレートを生成します。
|
1 2 |
yarn hygen init self |
生成されたテンプレートがこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 |
% tree _templates [16:34:29] _templates └── generator ├── help │ └── index.ejs.t ├── new │ └── hello.ejs.t └── with-prompt ├── hello.ejs.t └── prompt.ejs.t |
ヘルプコマンドが生成されたので実行してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
% yarn hygen generator help [16:35:13] yarn run v1.17.0 $ /Users/mabui/git/nuxt_template/node_modules/.bin/hygen generator help Loaded templates: _templates help: hygen generator new --name [NAME] --action [ACTION] hygen generator with-prompt --name [NAME] --action [ACTION] ✨ Done in 0.28s. |
yarn hygen generator new [ジェネレーター名]で新しいジェネレーターを生成することができます。
今回はコンポーネントの生成をhygenで行いたいのでcomponentジェネレーターを作成します。
|
1 2 3 4 5 6 7 8 |
% yarn hygen generator new component [16:38:30] yarn run v1.17.0 $ /Users/mabui/git/nuxt_template/node_modules/.bin/hygen generator new component Loaded templates: _templates added: _templates/component/new/hello.ejs.t ✨ Done in 0.28s. |
hello.ejs.tは不要なので削除しておきます。
コンポーネント作成用のジェネレーターができたので、開発に利用できるよう設定していきましょう。
ディレクトリの設定
その前にディレクトリ名が_templatesだと何用のファイルか分からなくなるため、ディレクトリ名の変更を行います。
ルートディレクトリ配下に.hygen.jsを作成することで設定を読み込んでくれます。
.hygen.js
|
1 2 3 4 |
module.exports = { templates: `${__dirname}/hygen` } |
上記を作成して、ディレクトリ名をhygen に変更しましょう。
コマンドプロンプト用の設定
hygenコマンド実行時に対話式にするための設定ファイルを作成します。
[ルートディレクトリ]/hygen/component/new/prompt.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
module.exports = [ { type: 'select', name: 'category', message: 'コンポーネントのディレクトリを選択してください', choices: ['atoms', 'molecules', 'organisms'] }, { type: 'input', name: 'name', message: 'コンポーネント名を入力してください' }, { type: 'toggle', name: 'test', message: 'テストファイルを作成しますか？', enabled: 'Yes', disabled: 'No' }, { type: 'toggle', name: 'story', message: 'storyファイルを作成しますか？', enabled: 'Yes', disabled: 'No' } ] |
コンポーネント作成用の設定
Vueコンポーネントを作成する用のテンプレートファイルを用意します。
ヘッダーのメタ情報としてto:でテンプレートを出力するパスを指定でき、テンプレート内では先ほどprompt.jsで設定したnameを指定して<%= name %>の形式で変数を使用することができます。
また、ヘルパーオブジェクトhを使用して変数に変更を加えることも可能です。
詳細は公式ドキュメントを参照してください。
https://www.hygen.io/templates
[ルートディレクトリ]/hygen/component/new/vue.ejs.t
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
--- to: src/components/<%= category %>/<%= name %>.vue --- <template> <div class="<%= h.changeCase.param(name) %>"></div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: '<%= name %>', components: { // }, mixins: [], props: { prop: { type: String, required: true } }, data: () => ({ data: '' }), computed: { computed() { return {} } }, mounted() {}, methods: {} }) </script> <style lang="stylus" scoped> // .<%= h.changeCase.param(name) %> </style> |
同じ方法でjest,storybookのテンプレートも作成していきます。
これらのテンプレートを用意したプロジェクトをgithubで作成しましたので参照してみてください。
mabuix/nuxt_template
テンプレートの生成
上記までのファイルを用意して下記対話式コマンドを実行すればテンプレートが生成されます！🍺
yarn hygen component new
こちらをpackage.jsonのscriptsに記述して短縮コマンドで実行できるようにしておきましょう🙌
|
1 2 3 4 5 |
"scripts": { ... "hygen": "hygen component new" }, |
実行結果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
% yarn hygen [16:11:26] yarn run v1.17.0 $ hygen component new ✔ コンポーネントのディレクトリを選択してください · atoms ✔ コンポーネント名を入力してください · VHogeHoge ✔ テストファイルを作成しますか？ · No / Yes ✔ storyファイルを作成しますか？ · No / Yes Loaded templates: hygen inject: src/components/atoms/index.js inject: stories/atoms.ts inject: stories/atoms.ts added: src/test/components/atoms/VHogeHoge.spec.js added: src/components/atoms/VHogeHoge.vue ✨ Done in 10.54s. (miniconda3-4.3.11) |