こんにちは。フリーランス・コンサルタント＆エンジニアの さてさて、LaravelはPHPのフレームワークだというのはみなさんご存知だと思いますが、実はJavaScriptのパッケージ管理サービスnpmと連携する機能があるのをご存知でしょうか。
npmを使うと、必要な別パッケージとの依存関係を自動的に解決してくれますし、何よりソースコードを自動的にダウンロードしてきてくれるためとても重宝します。
もしかするとJavaScriptと聞くとcdn（インターネット上から読み込むことができるJavaScriptやCSS）を思い出す方もいらっしゃるかもしれませんが、やはりcdnは便利な分デメリットもあります。つまり、将来的にサービスが終了してしまうとJavaScriptやCSSが読み込めなくなってしまうというリスクが残ってしまうということです。
考えたくはないですが、Googleのように影響が大きなサービスをバツン！と終了させてしまうことも考えられるわけです。
そして、こうした理由からcdnは使わずにサイト開発したい人も少なからずいらっしゃるのではないでしょうか。
ということで、今回はLaravelでnpmのパッケージをインストールし、それを実際にウェブページから呼び出すまでの方法をご紹介します。
ぜひ開発の参考にしてくださいね。
※ 開発環境： Laravel 5.7, node.js: 8.10, npm: 6.4
準備
Laravelからnpmのパッケージを利用するにはLaravel Mixが使えるようになっている必要があります。
まずは次のコマンドでインストールしておきましょう。
npm install
※ インストールされる内容はすでにpackage.jsonで定義されています。
するとnode_modulesというフォルダが作成され、この中にLaravel Mixに必要なパッケージがコピーされることになります。
そして、この時点でjQueryやVue.jsなどのパッケージもインストールされていますが、今回はテストとして以前公開した “画像をプレビュー表示できるvueディレクティブ” の v-preview-input をインストールし、このパッケージをサイト上から呼び出してみましょう。
npm i v-preview-input --save
npmパッケージをコンパイルする
では、ここからnpmでインストールされたパッケージの中から必要なものだけをコンパイル（１つのJSファイルにする）しましょう。
まず、resources/js/app.jsを開きます。
この中で書かれているパッケージがpublic/js/app.jsの中にまとめられるのですが、初期状態では以下のパッケージが含められています。（実際にはbootstrap.js内で定義されていて、この外部ファイルが呼び出されています）
- lodash ・・・ データ構造を変化させるなどの便利パッケージ
- popper ・・・ ツールチップ表示
- jquery ・・・ JSフレームワーク
- bootstrap ・・・ CSSフレームワーク
- axios ・・・ Ajax通信
- Vue ・・・ JSフレームワーク
ただ、今回のテストで必要なのは以下の２つだけです。
- Vue.js本体
- v-preview-input
そのため、初期状態で利用することになっているパッケージやコンポーネントは次のようにコメントアウトして使えないようにします。
// require('./bootstrap');
// Vue.component('example-component', require('./components/ExampleComponent.vue'));
// const app = new Vue({
// el: '#app'
// });
そして、まだ呼び出されていないv-preview-inputを呼び出すようにしましょう。
window.Vue = require('vue'); // ←ここは最初からあります
require('v-preview-input');
では、この状態でコンパイルします。
次のコマンドを実行しましょう。
npm run dev
コンパイルが成功するとapp.js内にVueとv-preview-inputのコードが１つにまとめられているはずです。
実際に見てみるとこのような形で実行されています。
window.Vue = __webpack_require__(***); __webpack_require__(***);
では、実際にVueとv-preview-inputを呼び出してみましょう。
app.jsを呼び出す
といっても通常通り<script></script>タグを使ってapp.jsを呼び出すだけです。
<html>
<body>
<script src="/js/app.js"></script>
</body>
</html>
これで、いちいちVue.jsとv-preview-inputを各ページで呼び出さなくてもapp.jsだけ呼び出していれば必要なJavaScriptは読み込まれていることになります。
また、もちろんブラウザの設定にもよりますが、主要なブラウザは初期状態でJavaScriptやCSSのキャッシュをつくる場合が多いので、もし別のページへ移動した場合、app.jsの読み込みを省略できる可能性が高いです。
ちなみに
さきほどnpmパッケージをひとつにまとめましたが、Google の開発者ツールを見ると以下のようなメッセージが表示されています。
これは、「今あなたが使っているのは開発者用のVueですよ！」という意味で、つまりは「もっとファイルサイズが小さくてコンパクトな本番バージョンもありますからね！」と言っています。
そこで、せっかくなので最後に本番バージョンのapp.jsを作ってみましょう。
では、次のコマンドを実行してください。
npm run production
おそらく今回はnpm run devよりも時間がかかったのではないでしょうか。
これは、先ほどのapp.jsの内容をよりコンパクトにより高速に実行できるようコードを変更しているからです。
では実際に作成されたapp.jsの中を見てみましょう。
今回は先ほどとは違ってコードが暗号のように記述されていて改行もありません。
ただ、これはコンピュータからすると元のコードと同じ意味になりますので実行には問題はありません。
そして先ほどのメッセージは消えているはずです。
ただし、繰り返しになりますが本番用のapp.jsは作成に時間がかかるので、開発をしている場合には不向きです。そのため、開発をしている間はnpm run devで高速にコンパイルし、開発が完了したらnpm run productionでよりコンパクトなファイルを作成するようにします。
おわりに
ということで今回はnpmパッケージをLaravelで利用する方法をまとめてみました。
私個人としてはJavaScriptやCSSをひとつにまとめるのは保守がしにくくなってしまうため好きではないのですが、サイト表示のスピードアップには有効ですのでサイトのコンセプトによって全体的にコンパイルしたりパッケージ部分だけをまとめたりと、使い分けをすればいいのではないかと考えています。
ちなみに元々はJSやCSSのパッケージはbowerで管理していました。
bowerはとてもシンプルで、実行したフォルダ内にbower_componentsというフォルダを作ってくれてその中にVueやｊQueryをコピーしてくれていました。
しかし、ご存知の通りbowerはすでに利用が非推奨となってしまい、本家のサイトでもFacebookが作ったパッケージマネージャYarnを使うようにアナウンスされています。
そして、そのYarnも結局はnpmのパッケージを使っているので、メインはnpmというのが開発のスタンダードになりそうですね。
ただ、Yarnを使うとインストールが早いとの情報もあり、代替案としては残しておこうと思っています。
ではでは〜。
