読者です 読者をやめる 読者になる 読者になる

yarnでember-cliをインストールしてきた #embersapporo

https://www.facebook.com/groups/ember.sapporo/

Ember.js について語らう集まりです。特に前提知識は必要ありませんが、JavaScript フロントエンドに興味があるとより楽しめるかもしれません。

はい。
久しぶりに参加したので忘れないようにブログ書きます!

トピック

  • Kinesisの数週間かかるトレーニング冊子
  • Yarnはいいぞ
  • 予約大変
    • 勝手にカレンダーに予定が登録される予約ご提案システム
    • 寝過ごしたとき用すっぽかし専用ダイヤル

ember-cli を yarn でインストールした

以下作業ログ。

https://guides.emberjs.com/v2.9.0/getting-started/quick-start/
を見ながら、npmって書いてあるところをyarnにして実行してみよう!

$ yarn install -g ember-cli@2.9
→ global add を使えと言われる。親切!
$ yarn global add ember-cli@2.9

ember-cli インストールされた!

$ ember new .
(node:30281) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
WARNING: Node v6.9.1 has currently not been tested against Ember CLI and may result in unexpected behaviour.
version: 1.13.14
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
Trying to generate an application structure in this directory? Use `ember init` instead.

あっハイ

$ ember init
(node:30365) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
WARNING: Node v6.9.1 has currently not been tested against Ember CLI and may result in unexpected behaviour.
version: 1.13.14
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
(node:30365) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
We currently do not support a name of `20161025-getting-started`.

数字始まりのディレクトリがだめ?

$ cd ..
$ mv 20161025-getting-started ember-quickstart
$ cd ember-quickstart
$ ember init
$ vi bower.json

ember project できた! と思ったらEmberが1.13.0...
npmで入れた方のemberを見ちゃってるからかな? 消してみよう

$ npm uninstall ember-cli
$ ember init

ンンー ember-cli を npm install しろっていわれる!
あっ yarnのPATH追加してないな、そのせいか?

$ vi ~/.zshrc
`PATH="$PATH:$HOME/.yarn/bin` を追加
$ source ~/.zshrc
$ ember init
(node:32828) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
/usr/local/lib/node_modules/ember-cli/lib/models/project.js:634
      throw reason;
      ^

SyntaxError: /Users/imaz/src/local/ember-sapporo/ember-quickstart/package.json: Unexpected string in JSON at position 156
    at Object.parse (native)
    at Object.Module._extensions..json (module.js:587:27)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Function.Project.getProjectRoot (/usr/local/lib/node_modules/ember-cli/lib/models/project.js:620:15)
    at module.exports (/usr/local/lib/node_modules/ember-cli/lib/cli/index.js:50:22)
    at /usr/local/lib/node_modules/ember-cli/bin/ember:26:3

ンンンー!! あっ 消すときに-gつけわすれた!

$ npm uninstall -g ember-cli
$ which ember
ember not found

ンンンーーー
なんか記事みつけた
http://stackoverflow.com/documentation/ember-cli/7441/getting-started-with-ember-cli#t=201610251259544171138
このとおりにやっても「(@ursm) あっ いけた!」ええっ!?
「もうこれnpm消せるのでは〜? あっ だめだyarnがいた」
あっもしかしてnpmでyarnを入れないと動かないとか…?

$ npm install -g yarn
$ yarn global add ember-cli@2.9
$ which ember
ember not found

そんなことなかった\(^o^)/
ursmさんがyarnのpathを確認する方法をおしえてくれる。

$ npm global bin
/usr/local/Cellar/node/6.9.1/bin
$ echo PATH
→入ってなさそう

PATH追加した ~/.yarn/bin とは一体……
追加するとして、node/6.9.1 ってなってるけどこれnodeのバージョン変わるたびに変更するの…?

...( ゚д゚)ハッ!

$ vi ~/.zshrc
PATH="$PATH:`yarn global bin`"

これで毎回取得してPATH追加される!

$ ember init

キタ━━━━(゚∀゚)━━━━!!

yarn 所感

途中、npm uninstall -g ember-cli したとき、気持ちとしてはglobalのものをアンインストールしたいんだけどuninstallって書いたらもう書けた気になって -g を忘れるなあと思った。globalってオプションじゃなくてコンテキストだから変な感じするのかもなー。
その点、yarnだと yarn global ~~ っていうコマンドがあるから気持ちと合っていて良い感じがする!
rbenvもおなじだよね。rbenv globalrbenv local で違うものを指すのわかりやすくてとてもいい。

おわり

今回はインストールまで。
次回もこの調子で ember-quickstart すすめていきます!