vue-bulmaと太陽と埃の中で

土日潰して謎を解決したので書いておこうと思います。

TL;DR

  1. vue.jsで使えるbulmaのコンポーネントをnpm install
  2. サンプルコード通りに入れたけど何も起きない
  3. npm installだとpackage.jsonのバージョン指定が^1.0.0になっているけど、サンプルで使われてるリポジトリのpackage.jsonだとgithubの最新とるようになってるのに気づく
  4. そこ書き換えると\(^o^)/ウゴイタ!
  5. yarnめっちゃ早いやーん

はじまりはいつも雨

個人でアプリケーション作ろうと思って、テキストエディタを入れようと思ったので、いい感じにごちゃごちゃ考えないで使えるBulmaを使ってるコンポーネントを使おうと思ったわけです。


伝わりますか

ギフハブに監視されてるかどうかはよくわかんないですけど、まずこいつを使い始めるにあたって、幾つか問題がありました。
  • 普段vue-cliを使って最初の雛形を作成しているのですが、それを使っていると一部のコンポーネントがビルドできなかった
  • 見た感じwebpack2を使っているとうまくいきそう
  • 手元のvue-cliのwebpackテンプレートはvue2-webpack1なので上手くいっていないのかもしれない
  • シンプルな形でvue2-webpack2を導入するためのテンプレートが見つからない
ということで、まずはvue2-webpack2の組み合わせで開発が出来るように整えるひつようがありました。
vue-bulmaのコンポーネントのデモサイトを完全に参照して作業を行っています。

なぜに君は帰らない

この作業自体はそれほど難しいものではなく、webpackが起動するときのチェックエラーが何が問題なのかよくわからないエラーを吐く以外は上記のvue-adminのビルドスクリプトを参考に手元で修正を行ったので問題なく終わりました。
そして、もともと利用しようとしていたvue-bulma-tabsを追加するタイミングに至るのです。


readmeを見ると

npm install vue-bulma-tabs --save

を実行するようになっているので実行し、サンプルコードを動かしてみましたが、肝心のタブ部分が全く表示されない。なぜだ・・・グギギ・・・という感じで気を失ったのが土曜日のハイライトでした。

SAY YES

そして明くる日、目を皿にしてvue-adminと自分の環境をまず完全一致させ、それでもタブがvue-adminをいじったものでは表示されることを確認した上でpackage.jsonをコピーしてnpm_modulesをインストールし直したところタブが表示されることを確認したので、両方のpackage.jsonを見比べては、差異を1行ずつ反映して戻す、ということを繰り返していきました。
結果として、以下のようになっていたことが原因だったことが判明しました

# 表示されないときのvue-bulma-tabsのdependency
"vue-bulma-tabs": "^1.0.0",
# 表示されるときのvue-bulma-tabsのdependency
"vue-bulma-tabs": "github:vue-bulma/tabs",

そう、vue-bulma-tabsをnpm installで入れると、バージョン指定が1.0.0となっていますが、それでは動かないのです。バージョン指定部分は完全にvue-admin側のpackage.jsonを確認しないといけないようです。この部分にissueを上げるかどうか、チョット今考え中です。

そうそう、このチェックのために、package.jsonをいじりまくって毎回一応node_modules消して入れ直したりしてたので、yarnを滅茶苦茶活用した感じがあります。早い。ありがとうyarn。めっちゃいいやーん。

ということで、完全に罠にハマった話でした。皆さんもお気をつけください。

関係ないけどASKAファンです。ちゃんと復活して欲しい。

このブログの人気の投稿

2016年にgoを使ったのでまとめ

採用とは何か