Vue CLI サービス vue/cli-service-global をインストール（失敗）
npm install -g @vue/cli-service-global
npm ERR! Unexpected end of JSON input while parsing near '...:2614807,"npm-signatu'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-04-12T21_54_57_395Z-debug.log
さっそくエラー。Unexpected end of JSON input って何だろう。
ログを見たが、同じエラーメッセージで参考にならなかった
ぐぐってみたら、キャッシュをクリアすれば解決したとの先例あり。
【解決】npm install -g @vue/cli で、Unexpected end of JSON input while parsing nearが発生した - よしたく blog
よくあることらしい。
Node.js のキャッシュをクリア
npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
やった後に警告されてもねぇ。
Vue CLI サービスのインストールを再実行（解決）
npm install -g @vue/cli-service-global
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\@vue\cli-service-global\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/cli-service-global@3.5.5
updated 7 packages in 64.917s
とはいえ、いくつか警告が出ているので、一応ここに記録しておく。
サンプルプログラムの起動テスト（成功）
を見ながらサンプルプログラム app.vue を Visual Studio Code (VSCode) にて打ち込み、vue serve コマンドにてサーバを起動した。
これで Vue CLI サービスの稼働確認は完了とする。
Vue.js devtools で分析できるかも確認しておく（成功）
表示された Vue.js のページを Chrome のデベロッパーツールから解析できるアドインのようなものがあるらしい。
サンプルプログラムのソースが大したことないので、大したものは見えないが、動作としては問題なし。
サンプルソースを改良し、リアルタイムに更新されることを確認
先ほどのサンプルソース app.vue だと、固定テキストを出しているだけなので面白味がない。データ data の値を出力するように改良した。
先ほどと同様 vue serve で起動し、Chrome で開いた後で、VS Code で data の text の文字列を更新して保存するとリアルタイムに表示が変わった。
豊富な部品集
にある部品の Live Demo のページなどを表示させて、Vue の data の値をいじったりすると、連動して変化するのでとても実感が湧いた。
しかし、これだけ部品資産があるのを見ると、新しく作る必要はない気がしてくるな。
見た目で探せるサイトになっているといいのだが、各部品の GitHub へのリンク集になっているだけなので、欲しいものを探すのは楽ではないし品質は不明だ。
- awesome-vue は評判（品質）が不明だが、部品の数と種類は多い。
- Vue Curated は目安としていいね（星）数が分かるが、部品はかなり少ない。
という感じのようだ。
他にも、いろいろとライブラリがあるらしい
もう一冊、買ってきた。こちらの方が実際のアプリ開発に近い内容で詳しい。
- Ajax 用ライブラリ axios
は当然として、
- ユーティリティライブラリ Lodash
も入れといたほうがよいらしい。
ところで、どうやってテスト駆動開発するのだろう。
コンポーネント（.vue ファイル）の単体テスト方法が良く分からないので、ぐぐった。
に「テスト駆動開発環境を準備」というそのまんまの説明があった。
まずは Vue プロジェクトを作成しないといけないらしい。
VueSample というフォルダを作り、そこで VS Code のワークスペース作成、npm init まではやってあったが、vue create はやっていなかった。
１つ上の Projects ディレクトリに戻り、 今あるフォルダと同名の VueSample という名前で Vue プロジェクトを生成することにした。
PS E:\Users\tombi\Projects>vue create VueSample
プロジェクト名に大文字は禁止ですと怒られた。細かいなぁ…全部小文字に直す。
あわせて、既存のフォルダ名も全部小文字に直す。その上で再試行する。
PS E:\Users\tombi\Projects>vue create vuesample
標準の registry の応答が遅いから別の registry に接続するか？といった趣旨のことを訊かれたので、任せたところ、何やらファイルを取りに行き始めたが resolveWithNewModule のメタデータ取得 fetchMetadataで完全に止まってしまった。
Vue CLI v3.5.5
✨ Creating project in E:\Users\tombi\Projects\VueSample\vuesample.
⚙ Installing CLI plugins. This might take a while...
[ ..............] \ fetchMetadata: sill resolveWithNewModule chokidar@2.1.5 checking installable status
Ctrl + C で中断させ、もう一度やってみたところ、なぜか今度は通過できたので良しとする。
毎度おなじみ errno -4048 エラー
しかし、もう少し進んだところで結局エラーとなった。
npm ERR! path E:\Users\tombi\Projects\VueSample\vuesample\node_modules\.staging\postcss-81ed59bb\docs\architecture.md
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink
（以下略）
このエラー -4048 は、実際には権限の問題ではなく、単なるファイルアクセスのタイミングが悪いだけらしいと分かってきたので、VS Code を再起動し、再試行するだけにした。
VS Code を再起動し、再試行（２回目）（少し進んだ）
PS E:\Users\tombi\Projects\vuesample> cd ..
PS E:\Users\tombi\Projects>vue create vuesample
Overwrite ではなくて Merge の方を選ぶ。
✨ Creating project in E:\Users\tombi\Projects\vuesample.
⚙ Installing CLI plugins. This might take a while...
npm ERR! path E:\Users\tombi\Projects\vuesample\node_modules\.staging\pako-4e2939c1\dist\pako_inflate.js
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
（以下略）
少し進んだが、違うファイルで同じエラーとなった。再び再試行。
VS Code を再起動し、再試行（３回目）（少し進んだ）
PS E:\Users\tombi\Projects\vuesample> cd ..
PS E:\Users\tombi\Projects>vue create vuesample
Overwrite ではなくて Merge の方を選ぶ。
Vue CLI v3.5.5
✨ Creating project in E:\Users\tombi\Projects\vuesample.
⚙ Installing CLI plugins. This might take a while...
[ ......] \ extract:cssnano-util-get-arguments: sill extract cssnano-util-get-arguments@^4.0.0 extracted to E:\Users\tombi\Projects\vuesample\node_modules\.staging\cssnano-util-get-argum
少し進んだが、別のところ sill extract cssnano なんちゃらの解凍 extract で完全に止まってしまった。Ctrl + C で中断させ、VS Code を再起動し、再試行。
PS E:\Users\tombi\Projects\vuesample> cd ..
PS E:\Users\tombi\Projects>vue create vuesample
Overwrite ではなくて Merge の方を選ぶ。
先ほどの停止箇所は突破し、Installing additional dependencies... のところまで進んだ。
Vue CLI v3.5.5
✨ Creating project in E:\Users\tombi\Projects\vuesample.
⚙ Installing CLI plugins. This might take a while...
> yorkie@2.0.0 install E:\Users\tombi\Projects\vuesample\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
added 1154 packages from 912 contributors, removed 7 packages and audited 23618 packages in 77.921s
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
[ ......] \ extract:rxjs: sill extract rxjs@^6.4.0 extracted to E:\Users\tombi\Projects\vuesample\node_modules\.staging\rxjs-16032bf1 (42329ms)
しかし別のところ sill extract rxjs なんちゃらの解凍 extract で完全に止まってしまった。Ctrl + C で中断させ、VS Code を再起動し、再試行。
VS Code を再起動し、再試行（４回目）（最後まで進んだ）
PS E:\Users\tombi\Projects> cd ..
PS E:\Users\tombi>vue create vuesample
今度は Overwrite するかは訊かれなかった。
（前略）
🎉 Successfully created project vuesample.
👉 Get started with the following commands:
$ cd vuesample
$ npm run serve
どうやら成功したようだ。
※しかし後に、親フォルダを間違って実行していたことが判明する。
Vue.js サンプルアプリ画面が表示された
src サブフォルダ配下に、App.vue というファイルが出来た。
PS E:\Users\tombi> cd vuesample
PS E:\Users\tombi\vuesample> npm run serve
> vuesample@0.1.0 serve E:\Users\tombi\vuesample
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 2044ms 00:21:05
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.179.8:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
ところが、今回の App.vue は変更してもリアルタイムに Chrome 画面には反映されなかった。ホットリロードを有効にする設定が別にあるのだろうか？
本来の目的だったテスト駆動開発環境の構築は続行できず。
の「テスト駆動開発環境を準備」をやるつもりが、どうやら最初に vue create したさいの選択肢をすでに誤っていたらしい。
Manually select features
ではなく
default (babel, eslint)
の方を選んでしまったために、テスト環境が設定できなかった。
さらに4回目の再試行で、親フォルダを間違っていた orz
VSCode で App.vue、HelloWorld.vue をどのように改造しても、一切何も反映されない。ホットリロード以前の問題のようだった。
不審に思ってエクスプローラーでフォルダやファイルを調べたら、Projects フォルダの配下ではなくて、同列・外側に vuesample フォルダが発見された orz
振り返ると、4回目のコマンドを実行したときのフォルダが間違っている。
PS E:\Users\tombi\Projects> cd ..
PS E:\Users\tombi>vue create vuesample
ではなく、
PS E:\Users\tombi\Projects\vuesample> cd ..
PS E:\Users\tombi\Projects>vue create vuesample
でなければならなかった。ポカミス。
あわせて「テスト駆動開発環境を準備」も正しく進めることにする。
最初に Manually select features を選び、Unit Testing を正しく選択
Vue CLI v3.5.5
┌───────────────────────────┐
│ Update available: 3.7.0 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
（中略）
>(*) Unit Testing
( ) E2E Testing
最終的に、以下の設定でプロジェクトを再生成
Vue CLI v3.5.5
┌───────────────────────────┐
│ Update available: 3.7.0 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n
VS Code を再起動し、再試行（５回目）（成功）
また止まってしまったので、Ctrl + C で中断後、やり直し。
（前略）
🎉 Successfully created project vuesample.
👉 Get started with the following commands:
$ cd vuesample
$ npm run serve
再試行を５回目繰り返すことにより、ようやく Vue の導入に成功したようだ。
Vue.js サンプルアプリ画面が表示され、App.vue を変更するとリアルタイムに Chrome 画面には反映されるようになった。
しかし、ほとんど盲目的に再試行を５回繰り返すという対処方法は、ちょっと理解しがたい。
yarn なんて導入していないので、指示どおりにテスト実行はできない
の「テスト駆動開発環境を準備」では
インストールが終わったら、cd でプロジェクトのディレクトリに移動し、yarn test:unit を実行します。
と書かれているが、
- そもそも yarn は入っていない。
- Jest も入っていない
yarn は npm で代替できそうだが、Jest の方は導入しないと話にならぬと思われた。
Jest を導入したら、64個の脆弱性が発見された
npm install --save-dev jest
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ jest@24.8.0
added 166 packages from 103 contributors, removed 62 packages, updated 88 packages, moved 29 packages and audited 904207 packages in 43.754s
found 64 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
インストールはされたようだが、64個の脆弱性が発見されたとのこと。
使ったことがないコマンド npm audit fix を使うように指示された。
npm audit fix しても治らない
npm audit fix
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 10.485s
fixed 0 of 64 vulnerabilities in 904207 scanned packages
63 vulnerabilities required manual review and could not be updated
1 package update for 1 vuln involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
64個の脆弱性が分析されたらしく、更新できない63個と、無理やり更新できないこともない1個に類別された。不可解な英語 vuln の意味が分からない。
npm audit でチェックしてみたが、参照先を見ても何をすればいいのかは、よく分からなかった。ソフトウェア的に危ない部分があるよ、と警鐘を鳴らしている感じの文章だったので、開発者向けなのかもしれない。
Jest の安定バージョンを再インストールしてみる
で調べると安定バージョンは 24.6 であり、一方 node list で先ほど導入されたものを調べると 24.8 だったので、バージョン指定してやり直すことにした。
npm uninstall jest
npm install --save-dev jest@24.6
しかしアンインストールしても64個の脆弱性は消えず、バージョン指定して再インストールしても64個の脆弱性は消えない。打つ手がないので、これらは無視することにした。
Jest の単体テストサンプルを実行（成功）
Jest をインストールしたところ、
- tests (s あり）フォルダ、unit サブフォルダが追加されていた
- package.json に test:unit という scripts が追加されていた
npm run test:unit
> vuesample@0.1.0 test:unit E:\Users\tombi\Projects\vuesample
> vue-cli-service test:unit
PASS tests/unit/example.spec.js
HelloWorld.vue
√ renders props.msg when passed (28ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.948s
Ran all test suites.
どうやら Jest のサンプルの起動には、成功したようだ。
