Angular + webpack + bootstrap の開発環境構築①

webpackを使ったフロント周りの環境について備忘録の意味も含めてまとめることにしてみました.

第1弾として、node.jsの環境と、npmでのパッケージの準備までを行うことにします。

前提条件

macでの開発を前提として書いています。

Node.js の環境を整える

curl -L git.io/nodebrew | perl - setup

~/.bash_profile に nodebrew の Path を追加する

export PATH=$HOME/.nodebrew/current/bin:$PATH

pathを反映させる

source ~/.bash_profile

nodebrew でinstall 可能versionの確認

nodebrew ls-all

v6.7.0を install する場合は、

nodebrew install-binary v6.7.0

ローカルにinstallしたnodeのversionを確認する

nodebrew ls

使用するnodeのversionを指定する

nodebrew use v6.7.0

nodeの確認を行う

node -v
npm -v

npm で webpack, angular, bootstrapを用意する

環境によっては、グローバルへのinstall を行えない場合もあるため、
webpack,angular,bootstrapは、すべてローカルにinstallを行うことにします。

npm init -y
npm install webpack --save-dev
npm install jquery@2.2.4 --save
npm install angular --save
npm install bootstrap --save

webpackでのコンパイルを行えるようにする.

npm は、node_moduleのpathが通っているので、npmのscriptとして、webpackを登録しておく。

package.jsonは、こんな感じ

{
  "name": "angComp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "echo webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.5.8",
    "bootstrap": "^3.3.7",
    "jquery": "^2.2.4"
  },
  "devDependencies": {
    "webpack": "^1.13.3"
  }
}

次回予告

webpackの設定とコンパイルするとこまではまとめいきます。

Angular + webpack + bootstrap の開発環境構築①
Angular + webpack + bootstrap の開発環境構築②
Angular + webpack + bootstrap の開発環境構築③

2016年12月21日 追記

nodebrew の install 方法ですが、curlではなく、Homebrew でもinstall ができることに気がつきました。

$ brew install nodebrew

Homebrew で install すれば、パッケージ管理も楽になるの個人的にはHomebrew で入れる方をお勧めいたします。

注意)
Homebrew で入れても、nodebrew の current に選択されているnodeにpathが通っていないため、.bash_profileなどに下記のpathを通す必要はあります。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH