新しくなったMEAN.IOを試してみる

今年の2月からmean.ioのFACEBOOKのリリースで

Too much technology to play (graphQL, apollo, yarn, redux, angular2 so I have to do it as part of the next generation of mean…
But that means the Mean 1 – rc1 is out and we will (finally) release the 1.0 version
https://github.com/linnovate/mean/releases/tag/v1.0rc1
I changed the initial look and feel to be a bit more rellevent – simpler and hopefully friendlier…

っということで、今後はVer2っということです。

今までのものは、Ver1として

https://github.com/linnovate/mean/releases/tag/v1.0rc1

からGitできます。

git clone --depth 1 https://github.com/linnovate/mean.git  
npm install  
npm start

git clone --depth 1 https://github.com/linnovate/mean.git

npm install

npm start

でインストールして、スタートできるみたいです。

ただ私の環境からは単純には行かなくて、

git clone --depth 1 https://github.com/linnovate/mean.git  
npm install

1 2	git clone --depth 1 https://github.com/linnovate/mean.git npm install

こんなエラーがでてしまう

sh: babel: command not found

1	sh: babel: command not found

なので、

npm install -g babel-cli

1	npm install -g babel-cli

そして初めて

npm install
npm start

1 2	npm install npm start

です。

こんな感じです。

webstromでMEAN.IOをデバッグ

MEAN.IOのルートでgultしてみると

デフォルトはdevelopになっていて、

[14:19:40] Starting 'development'...
[14:19:40] Finished 'development' after 10 μs
[14:19:44] [nodemon] 1.11.0
[14:19:44] [nodemon] to restart at any time, enter `rs`
[14:19:44] [nodemon] watching: *.*
[14:19:44] [nodemon] starting `node --debug server.js`
Debugger listening on port 5858

[14:19:40] Starting 'development'...

[14:19:40] Finished 'development' after 10 μs

[14:19:44] [nodemon] 1.11.0

[14:19:44] [nodemon] to restart at any time, enter `rs`

[14:19:44] [nodemon] watching: *.*

[14:19:44] [nodemon] starting `node --debug server.js`

Debugger listening on port 5858

勝手にDebuggerを立ち上げてくれる。

なので、WebstormでやるべきことはこのDebuggerを受け取ること。

なので、

Edit Configurations -> Add New Configuration -> Node.js Remote Debug

といった感じでせっていたら、Debuggerを拾ってくれるはず！

ッと思ったら。ブレイクポイントで止まってくれない。

どうやらNode Debuggerをnode –debug-brk ~~~ で立ち上げないとDebuggerを拾ってくれないみたいです。

ということで、修正。

修正すべきところは、

/gulp/development.js

です。

    nodeArgs: ['--debug'],
　　　　を↓のように修正
    nodeArgs: ['--debug-brk'],

nodeArgs: ['--debug'],

　　　　を↓のように修正

nodeArgs: ['--debug-brk'],

gulpを立ち上げ直す。

Good!

MEAN.IOではEclipseは、もう限界。。WebStormに乗り換え。

いままで8年ぐらい常にEclipseをプラットフォーム使ってきたのですが。

MEAN.IOを使うには、思うにEclipseは限界です。

うまくプラグインしてってもどうしても埋め合わせられない穴がある

っという結論に至りました。

今後はWebStormを使います。

WebStormの最大のデメリットは有料。

US $ 129.00 /1st year
US $ 103.00 /2nd year
US $ 77.00 /3rd yr onwards

つまり、はじめは129ドル。

1月間は試用期間があるので、それを試してみます。

MEAN.IOってフロントエンドをChromeの開発ツールでデバッグしづらい

先に書いたように

MEAN.IOは使用するjavascriptを/bundle/app.jsにまとめてくれる。

なので、軽くなるのだがその分デバッグがしづらい。

Chromeの開発ツールを使うのは不可能。。

node_componentsの中身をデバッグする必要はないので、そこがまとめられているのは

ヨシとして、

packagesの中身がまとめられるのはやめる。

デフォルトで/app.js の45行目あたりpackages内をまとめる部分をコメントアウト

//  var req = require.context('./packages', true, /\/public\/(?!tests|assets|views)(.*)\.js$/);
//  req.keys().map(req);
  var req = require.context('./node_modules', true, /\/meanio-(.*)\/public\/(?!tests|assets|views)(.*)\.js$/);
  req.keys().map(req);

// var req = require.context('./packages', true, /\/public\/(?!tests|assets|views)(.*)\.js$/);

// req.keys().map(req);

var req = require.context('./node_modules', true, /\/meanio-(.*)\/public\/(?!tests|assets|views)(.*)\.js$/);

req.keys().map(req);

/packages/custom/…./server/views/includes/foot.html

にハードコーディングでインサートしていく。

<!-- 開発用（本番では外すこと） START -->
<script src="/packages/custom/porkyou/public/controllers/header.js"></script>
<script src="/packages/custom/porkyou/public/controllers/index.js"></script>
<script src="/packages/custom/porkyou/public/controllers/starter.js"></script>
<script src="/packages/custom/porkyou/public/controllers/translation.js"></script>
<script src="/packages/custom/porkyou/public/routes/system.js"></script>
<script src="/packages/custom/porkyou/public/routes/users.js"></script>
<script src="/packages/custom/porkyou/app.js"></script>
<!-- 開発用（本番では外すこと） END -->

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

件名の通り

まずは、入れたいパッケージをnpmでインストール

$ npm install angular-translate --save

1	$ npm install angular-translate --save

/app.jsの上の方に

import 'angular-translate';

1	import 'angular-translate';

して

gulp

gulp

angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。

mean.ioのデフォルトでインストールした状態なら

/packages/custom/…./server/views/includes/foot.html

に

<script type="text/javascript" src="/bundle/app.js"></script>

1	<script type="text/javascript" src="/bundle/app.js"></script>

と書かれているはず。

MEAN.IOをセットアップ

MEAN.IOを採用。

同じ系統でMEAN.JSというのもあるようだが、MEAN.IOのほうが風説が良いので採用。

MEANコマンドをインストール。

ついでにgulpも

$ sudo npm install -g gulp
$ sudo npm install -g mean-cli

1 2	$ sudo npm install -g gulp $ sudo npm install -g mean-cli

そして、meanコマンドでどこかのフォルダにプロジェクトを展開

$ mean init porkyou(プロジェクト名)

1	$ mean init porkyou(プロジェクト名)

すべての質問にデフォルトでリターン連打。

All Done! - Now lets install the dependencies...

  Install node package dependencies:
    $ cd porkyou && npm install
  Bower install should be triggered for client side dependencies.
  If it did not run invoke it manually...
    $ cd porkyou && bower install
  Run the app by running:
    $ cd porkyou and then run..
    $ gulp

All Done! - Now lets install the dependencies...

Install node package dependencies:

$ cd porkyou && npm install

Bower install should be triggered for client side dependencies.

If it did not run invoke it manually...

$ cd porkyou && bower install

Run the app by running:

$ cd porkyou and then run..

$ gulp

の指示に従って、

$ cd porkyou && npm install

1	$ cd porkyou && npm install

gulpを実行

$ gulp

$ gulp

では、サーバを実行。

node server.js

1	node server.js

M	T	W	T	F	S	S
« Nov
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Tag: MEAN.IO