npm入門記事

1. フロントエンド
開発の３ステップ
npmことはじめ
@hashedrock

2. フロントエンド
やりたい

3. 入門記事でいきなり
重いのが見つかる
例：「gulp + browserify + reactやってみる」

4. npm?

5. bower?
(どちらもパッケージマネージャ)

6. browserify?
gulp?
grunt?
mocha?
phantomjs?
iojs?
coffee?

7. 情報量おおすぎ

8. 本職JSer以外
「ひくわー」

9. 覚えるべきものを
一つに絞ろう

10. npm

11. 覚える機能は3つだけ

12. 1. npm init
2. npm install
3. npm run

13. npm init
(1)

14. 「このディレクトリ下は
我々npmが
管理下に置く！」宣言

15. npm initを実行したところ
←プロジェクト名（適当でよい）
←バージョン（このままでよい）
←最初に実行されるjs（あんまり気にしなくていい）
←作者名（是非名乗ろう）
いろいろ聞かれるけど、全部リターンでかまわない

16. 結果
ディレクトリ直下にpackage.jsonができる

17. package.jsonの中身
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

18. npm install
(2)

19. npm install jquery ̶save
パッケージ名
「jquery」をネットから持ってくる

20. npm i jquery -S
省略形でも書ける

21. 実行結果
「node_modules」フォルダができて、
直下にjqueryがインストールされる

22. package.json
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.1.3"
}
}

23. {
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.1.3"
}
}
以後、dependencies内は
npm install だけで、自動インストール

24. browserify
• node_modules下にインストールされたライブラリ
を、jsから参照できるようにするツール
• 普通の言語なら当たり前の機能だけど、ブラウザ上
では今までできなかった

25. <script src="assets/js/jquery.min.js"></script>
var $ = require("jquery");
browserify使うとこう書ける

26. npm + browserifyの組み合わせが強い
npmで山ほどライブラリ突っ込める

27. browserifyは
「npm install -g browserify」
でインストールできます。
npm install -gについては後述

28. npm run
(3)

29. タスク実行機能

30. "scripts": {
"build": browserify src/main.js > build/bundle.js
}
$ npm run build
$ browserify src/main.js > build/bundle.js
package.json内に下記のように書いておく
とすると、npmは下記のコマンドを実行する

31. 指定したコマンド
実行してくれるだけ

32. しぬほどシンプル

33. npm runでタスク一覧

34. 例えば
npm run build
npm run watch
npm run serve
などを書いておくと、
他人に引き継ぎやすくなる

35. 他人に説明する例
「npm installしたあと、
npm runで出てくるコマンド
叩いてください」
説明完了

36. 便利機能
というよりはお作法

37. 自動リロードとか
は・・・？

38. npm install -g wtch

39. サーバ立てたい

40. npm install -g http-server

41. npm install -g
でいろんな小物ツールを
インストールできる
参考
https://gist.github.com/hashrock/
7fdf1b937e1eb5de796d

42. タスク自分書くの
面倒くさい

43. https://github.com/
sushicorp/sushipm
タスクのテンプレート集
作っときました

44. の
プロダクトです

45. npm is fun

46. end