DEV

ターミナルでMonaca + Onsen UI開発する

#Monaca#Onsen UI

onsen ui

https://ja.onsen.io/

monaca + onsen uiの開発環境を作る

https://ja.onsen.io/getting-started/

Monaca CLIをインストール

$ npm install -g monaca

プロジェクトを作成

$ monaca create helloworld

下記エラーが出た。 [ReferenceError: Promise is not defined]

npmのバージョンが古いとこうなるらしい。 下記からnode.jsをインストールしなおしてみた。 https://nodejs.org/en/

$ node -v
v6.7.0
$ npm -v
3.10.3

npmをアップデートしてみる。

$ sudo npm install -g npm
$ npm -v
3.10.8

もう一度、monaca create helloworldをやったらできた。開発環境とかテンプレートとか選択したらプロジェクトが作成される。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-1-11-19

Onsen UI and Reactを選択してみた。下記のように表示されて、プロジェクト作成成功した。

Project created successfully.
Type "cd helloworld" and run monaca command again.
  > monaca preview      => Run app in the browser
  > monaca debug        => Run app in the device using Monaca Debugger
  > monaca remote build => Start remote build for iOS/Android/Windows
  > monaca upload       => Upload this project to Monaca Cloud IDE

プレビューを見てみる

$cd helloworld
$monaca preview

下記のようなエラーが出ました。 Cannot find module ‘babel-core’. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-1-29-58

どうもwebpack1ではなくて２が必要っぽい。

$ npm install -g webpack
$ webpack v
Hash: 8d3e765af8a674f3b6ba
Version: webpack 1.13.2
Time: 33ms

2.xはバージョン指定が必要らしい。

$ npm view webpack dist-tags
{ latest: '1.13.2', beta: '2.1.0-beta.25' }
$ npm install -g webpack@2.1.0-beta.25

まだ同じエラーが出る。

$ npm -g install babel-core@6.0.0
$ rm -rf ~/.cordova

これで、$ monaca previewをしたら、きちんとプレビューが表示された。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-2-23-50

monaca debugができないと思ったら、年間５万円だった。高いな。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-12-06-33

Apache Cordova×OnsenUI×Visual Studioでハイブリッドアプリを爆速開発

こんなかんじでやりたい。cordova + onsen ui + react + webpackみたいなかんじにしたい。 PhoneGap Buildでもいいかもしれない。adobeの月額５０００円のに入ってるし。