久しぶりに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でトランスパイル