Monaca CLIで 'Cannot find module 'home\.cordova\node_modules\webpack' と怒られたとき

概要

Monacaでローカル開発環境をつくろうとして、ハマったのでメモ

最新のJSフレームワーク（Vue, React, Angular2）は実行前にトランスパイル処理（コード変換）を行う必要があるらしいです。

しかし、公式ドキュメント

DOS

$ npm i -g monaca
$ monaca login
$ monaca import

$ monaca transpile

の通りに進めても動かず、困りました。
ので、以下対応方法です。

手順

1.Monaca Cloud IDE上でプロジェクト作成

今回は「Onsen UI V2 Vue Minimum」プロジェクトを作成

2.Monaca CLIのインストール

インストールしたらログインしてください。

DOS

$ npm i -g monaca
$ monaca login

3.Cloud IDEで作成したプロジェクトをインポート

DOS

$ monaca import

対象のプロジェクトを選択するとインストールが開始されます。
（結構時間かかります。）

4.トランスパイル処理実行してみる

DOS

$ monaca transpile

Running Transpiler...
module.js:549
    throw err;
    ^

Error: Cannot find module 'ホームディレクトリ\.cordova\node_modules\webpack'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Program Files\nodejs\node_modules\monaca\node_modules\monaca-lib\src\transpile.js:4:15)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

こうなってしまいます。。。
.cordovaフォルダにwebpackがインストールされていませんとのこと･･･

5.ひと手間加える

importしたアプリのルートフォルダで、

DOS

$ monaca reconfigure

その後、トランスパイルを行うと正常に動きました。
monaca reconfigureコマンドは

設定ファイルを復旧 ( 再作成 ) します。オプションを指定しない場合、該当するファイルのすべてを復旧します。該当するファイルに関しては、下記の 「 オプション 」 をご確認ください。

とのことです。
(参考) Monaca CLI コマンド | Monaca Docs

感想

1晩中調べてました。