npm使い方メモ

久しぶりにJS触ったのでやったことメモ

• npm バージョンアップ
• npm init
• npm intall

npmバージョンアップ

sudo npm install -g npm

npm init

npm init

色々プロジェクト作る時に聞かれるので答えていくと、package.jsonが出来る

npm install

npm install bulma --save

--saveまたは-sとするとpackage.jsonに依存パッケージとして追加される

一気にパッケージをインストールしたい時はnpm installと入力するとpackage.jsonにあるパッケージがインストールされる

プロジェクトの最小構成

dist/  // srcの中身をビルドしたのもが入る
src/  // htmlやJSコード
   /index.html
   /js/
   /css/
   /img/
node_modules/  // npm installして入ってくるモノ
package.json  // パッケージ管理

流れ

src/js下に書いてnpm run buildでdist/bundle.jsに書き出す
書き出したjsをindex.htmlで読み込ませてブラウザで見る

とりあえずこれで良い

Babel

babelはES2015を現状のブラウザで動くコードに変換(トランスパイル)してくれる
※調べたけど今回は使ってない

npm install --save-dev babel-cli babel-preset-env

presetとは: どの仕様で動いているかを選択するための項目
.babelrcで指定

.babelrc

{
  "presets": ["env"]
}

使うコマンド

npm intall パッケージ -s
npm run
npm run 設定したコマンド

参考

フロントエンド開発の3ステップ
step by stepで始めるwebpack
Babel
Babelを使おう
Babel6でトランスパイル