やりたいこと
Monaca CLIにてトランスパイルを行いたい
(Monacaプロジェクトをトランスパイルし、実機で動作確認できれば方法は何でも良い)
Angular2のプロジェクトでmonaca transpile
がしたかった
経緯
- MonacaのクラウドIDEにて「Onsen UI V2 Angular Navigation」プロジェクトを作成
- Monaca CLIを使うためにnode.jsをインストールし、
npm install -g monaca
した - Monaca CLI上で、ログインをしてから
monaca import
で
「Onsen UI V2 Angular Navigation」プロジェクトをインポート
0. プロジェクトのディレクトリに移動し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)
(nw@0.26.6
をインストールしたら、注意は消えました。)
分かっていること
実際にホームディレクトリ.cordova\node_modules\webpack
を確認してみると以下のような状態です。
![
この後、.cordova
上でnpm install webpack
をした後
もう一度monaca trasnpile
をしたら以下の表示になりました。
Running Transpiler... C:\Users\RoyDeffrayeur\MatchingApplication2\webpack.prod.config.js:17 throw new Error('Missing Webpack Build Dependencies.'); ^ Error: Missing Webpack Build Dependencies. at Object.<anonymous> (ホームディレクトリ\作成したプロジェクト\webpack.prod.config.js:17:9) 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) 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:5:21) at Module._compile (module.js:652:30) Project has failed to transpile. Error has occured while transpiling ホームディレクトリ\作成したプロジェクト with webpack. Please check the logs.
エラーに出ているwebpack.prod.configでは、最初の20行目程度まで以下のようなソースになっています。
見た感じでは、ホームディレクトリ/.cordva/nodemodules経由でプラグインのモジュールを参照しているように見えます。
javascript
1try { 2 var path = require('path'); 3 var os = require('os'); 4 var cordovaNodeModules = path.join(os.homedir(), '.cordova', 'node_modules'); 5 6 var webpack = require(path.join(cordovaNodeModules, 'webpack')); 7 var HtmlWebpackPlugin = require(path.join(cordovaNodeModules, 'html-webpack-plugin')); 8 var ExtractTextPlugin = require(path.join(cordovaNodeModules, 'extract-text-webpack-plugin')); 9 var CopyWebpackPlugin = require(path.join(cordovaNodeModules, 'copy-webpack-plugin')); 10 var ProgressBarPlugin = require(path.join(cordovaNodeModules, 'progress-bar-webpack-plugin')); 11 12 var cssnext = require(path.join(cordovaNodeModules, 'postcss-cssnext')); 13 var postcssImport = require(path.join(cordovaNodeModules, 'postcss-import')); 14 var postcssUrl = require(path.join(cordovaNodeModules, 'postcss-url')); 15 16} catch (e) { 17 throw new Error('Missing Webpack Build Dependencies.'); 18}
知りたいこと
- Missing Webpack Build Dependenciesが出る原因
- 公式ドキュメントを見る限りはmonacaのinstallだけで事足りそうだが、他に手順が必要なのか
長くなりすみません。
何か思い当たりのある方、ご教授よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。