前提条件

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