bakalog

備忘録的なもの

みんな大好きnpmさんのコマンドについて

ほぼ参考元マネて写経しただけですが、
忘れがちなのでメモっときます。

  • npm init
  • npm install hoge
  • npm run

npm init ( npmさん「ここに作業小屋を建てよう」 )

npm init

任意ディレクトリで実行する事で、該当ディレクトリをnpmの管理下に置き、package.jsonを生成する
実行する事で、以下のpackage.jsonが生成される

npmさんが小屋建てるために必要な書類をまとめました。みたいなもんです。(多分)

{  
  "name": "learnNpm",  
  "version": "0.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "author": "",  
  "license": "ISC"  
}  

npm install hoge ( npmさん「工具箱から道具とってくる。」 )

npm install hoge  

npmレポジトリからライブラリをダウンロードするコマンド
ライブラリ自体は npmさんの実家 https://www.npmjs.com/からインストールされる。

npm install hoge --save

のように"--save"を記述する事で、取得したライブラリをpackage.jsonに追加する事ができる。
これ一回きりじゃなくてとても大事だからメモっといて!って出来る。

  "dependencies": {  
    "jQuery": "~1.7.4"  
  }

dependencies (依存性) に追加する事によって、それ以降は npm installだけで、
追加したライブラリをインストールする事ができる。
このレシピに使ったものはこういう名前で、こんなversionやでー。って指定できる。

コマンドは省略できる

install は i
--save は s に省略する事が可能。

npm install hoge --save
↓
npm i hoge -s

ナウいnpmさんは略語でもイケる口。

browserify(ぶらうじふぁい) のインストール

ひとまず何も考えずに、以下のコマンドでインストールする。

npm i -g browserify

ちなみに -g はグローバルインストール。
PC自体にインストールする事で、Terminalで利用できるツールを追加する。

node_modulesにインストールされたライブラリをjsから参照する事ができる奴。
今までだと、html側にjsを読み込むコードを書く必要があったが、
ブラ氏ふぁいを利用すると、JavaScript上で直接ライブラリを参照する事ができる。
ついでにライブラリ同士の依存も自動で解決してくれる。ぶら氏 感謝。

<!--いままで ( html内 )-->  
<script type="text/javascript" src="jquery.min.js"></script>

<!--ブラ氏の働き ( js内 )-->
var $ = require("jquery");

npm run

npm scriptsと言うタスク実行機能を呼び出すコマンド。 package.json内に書かれた「"script"」を実行してくれる。

{
  "scripts": {
    "build": "browserify src/main.js > build/bundle.js"
  }
}
// 実行例として、以下を実行すると
npm run build
// ↓ 以下のコマンドが実行される
browserify src/main.js > build/bundle.js

npm run だけだと他に利用可能なタスク一覧を表示してくれる。
利用可能なタスクを用意して置くと、タスクを順番に実行するだけで環境を用意する事などが出来て便利。
( ※タスクの量が多くなってきた場合は、別途Gulpなどを導入する事が考えたほうがよい。 )

参考 : フロントエンド開発の3ステップ(npmことはじめ)