NuxtJS – 自作のmoduleを作成する

NuxtJS NuxtJS
https:/nuxtjs.org/
この記事は約5分で読めます。

はじめに

UI/UXの設計やプロトタイプ作成してイメージを具現化し仮説検証していくプロセスを効率的に回せるようになりたいという目的でフロントエンドを触り出してから、NuxtJSを学んでいます。

今回は、NuxtJSでの自作したライブラリをモジュールとして使う方法について整理してみました。コンポーネント共通で使用するアプリ用のモジュールはどうすべきか?というところから来ています。NuxtJSには、communityから提供されるmoduleと同じように自前のモジュールをロードしてアプリケーション内で使用可能になるようなので、その仕組みを使って自作モジュールを作成していきます。

理解の誤りがあるかもしれませんので記述内容については個人の責任のもと判断ください。

NuxtJSのビルドの流れ

以下のソースを参考に、ssrモードでnuxt run devを実行した時の大まかな流れを掴んでおきます。

nuxt.js/dev.js at 2.x · nuxt/nuxt.js
The Intuitive Vue(2) Framework. Contribute to nuxt/nuxt.js development by creating an account on GitHub.
  • Nuxtインスタンスの作成と初期処理(ready)
    • moduleのreadyはここで実行される。
      moduleのhandlerが実行される(実行コンテキストはModuleContainerインスタンスでnuxt.config.jsで指定したmoduleのオプションが引数に渡される)
  • Server インスタンスの作成と初期処理(ready)
    • VueRendererインスタンスの作成と初期処理(ready)
      • manifestファイルなどを読む(dev時はmemoryfsから)
  • Serverのlisten
  • バナーの表示
  • ビルド
    • .nuxtディレクトリにアプリケーションリソースをgenerate
    • webpackビルド

モジュールでできること

プラグインやビルド、serverMiddleWare、フックなどの機能を提供することができます。

NuxtJSでモジュールを作成する

単純な出力だけを行なうモジュールを作成し、モジュール作成のイメージをつかみます。

モジュールのファイル構成

作成するモジュールの構成は以下のとおり。

moduleによって構成は異なると思いますが、ここでは以下の構成としてみます。

  • index.jsは、module機能を使えるようにする定義を書く
  • plugin.jsは、Componentなどでモジュール内の機能を使用可能にする定義を書く
  • mymodule.jsは、プラグイン機能の本体を書く

モジュールを利用可能にする

まず、mymoduleをNuxtJSでロードし利用可能な状態にします。nuxt.config.jsに以下のような定義を書くことで、moduleがロードされるようになります。

オプションがある場合は以下のようにして渡すことができます。

なお、他にも以下のような書き方もできます。

モジュールを作成する

index.js

index.jsでは、オプションのマージ、hookでビルドされるテンプレートファイルをダンプ、プラグインファイル及びテンプレートファイルを追加しています。プラグインで登録しているファイルはnuxtの実行時にimportされます。

plugin.js

ここでは、inject関数を呼び、コンポーネントなどからthis.$mymoduleのように呼び出せるようにします。

mymodule.js

hello関数が登録されたオブジェクトを定義します。moduleはテンプレートファイルとしてコンパイルされるので、オプションの値を元に生成するソースを可変にもできます。

componentからmymoduleを呼び出す

npm run devで起動してブラウザ画面を開くと、以下のような画面が表示されることを確認できます。

まとめ

  • モジュール機構で自作のライブラリをNuxtアプリケーションに組み込み、コンポーネントなどから利用できる。
  • モジュールを使用するには、nuxt.config.jsのmodulesで定義する。
  • addTemplateやaddPluginで追加したリソースは、テンプレートとしてコンパイルされる。

参考リンク

 

コメント

タイトルとURLをコピーしました