1. はじめに
Mac では、Node.js (node) は、Homebrew でインストールするのが一番手っ取り早いようなのですが、私の場合は Titanium Studio をアップデートしたときにインストールされたらしく、当然ながら特定バージョンの切り替えもできず、実行時に Permission Error が頻発したりして、苦労が絶えませんでした。
そこで今回、自身の Mac の Node.js 環境を全面的に見直してみたので、その履歴を残しておこうと思います。
なお、Grunt を使っていると、Node.js のバージョンによってビルドが失敗するということもあったので、Node.js のバージョン切り替えができるように、nodebrew で管理することにしました。
参考
2. 環境
Mac の OSバージョンは、
OSX 10.9.5
作業開始前の各種バージョンは、
$ node -v v0.10.29 $ npm -v 1.4.14
でした。
3. やったこと
3.1. Node.js のアンインストール
まず、Node.js と npm をアンインストールします。
npm をアンインストールします。
$ sudo npm uninstall npm -g
Node.js をアンインストールします。
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom | while read i; do sudo rm /usr/local/${i}; done
$ sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*もし、Homebrew でインストールしていた場合は、こちらでアンインストール。
$ brew uninstall node
アンインストールできたか確認します。
$ node -v -bash: node: command not found $ npm -v -bash: npm: command not found
仕上げに .npm ディレクトリを消しておきました。
$ sudo rm -rf ~/.npm
3.2. nodebrew のインストール
コマンド一行でインストールできます。
$ curl -L git.io/nodebrew | perl - setup
~/.bash_profile に以下を追加します。
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bash_profile
3.3. Node.js のインストール
nodebrew から Node.js をインストールします。
$ nodebrew ls-remote $ nodebrew install-binary v0.10.38 ### install-binary しただけでは使えません $ node -v -bash: node: command not found $ nodebrew ls v0.12.4 current: none $ nodebrew use v0.12.4 use v0.12.4 $ node -v v0.12.4 $ npm -v 1.4.28
npm のバージョンが低くて npm install が失敗する場合があるので、npm を最新化しておきます。
$ npm install -g npm $ npm -v 2.11.2
最後に、npm install を sudo無しで実行できるようにしておきます。
$ sudo chown -R $(whoami) ~/.npm $ sudo chown -R $(whoami) /usr/local/lib/node_modules
参考
本題はここまでで完了です。
ここからは、おまけ。
4. 実践編
Bower と Grunt を使って、とあるライブラリのビルドをしてみます。
まずは、Yeoman の三種の神器をインストールします（今回 yo は使いません）。
$ npm cache clean $ npm install -g yo bower grunt-cli $ yo --version 1.4.7 $ bower -v 1.4.1 $ grunt -version grunt-cli v0.1.13
プロジェクトを作成します。
$ mkdir -p ~/work/videojs-test && cd $_ ### 全て Enter $ npm init $ npm cache clean ### 全て Enter $ bower init $ bower install videojs --save $ bower install videojs-contrib-media-sources --save $ bower install videojs-contrib-hls --save ### インストールされたバージョンを確認 $ bower ls videojs-test#0.0.0 /Users/akiyoko/work/videojs-test ├── videojs#4.12.9 (latest is 5.0.0-rc.2) ├── videojs-contrib-hls#0.17.2 └── videojs-contrib-media-sources#1.0.0
参考
Bower入門(基礎編) - from scratch
videojs-contrib-hls に dist/videojs.hls.min.js が無かったので、videojs-contrib-hls を grunt でビルドしようとしたら・・・、
$ npm install grunt --save-dev $ cd bower_components/videojs-contrib-hls/ $ npm install npm WARN engine [email protected]: wanted: {"npm":"^1.4.6","node":"^0.10"} (current: {"node":"0.12.4","npm":"2.10.1"}) npm WARN engine [email protected]: wanted: {"node":"~0.8 || ~0.10"} (current: {"node":"0.12.4","npm":"2.10.1"}) npm WARN peerDependencies The peer dependency karma-jasmine@~0.1.0 included from karma will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. npm WARN peerDependencies The peer dependency karma-requirejs@~0.2.0 included from karma will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. npm WARN peerDependencies The peer dependency karma-coffee-preprocessor@~0.1.0 included from karma will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. npm WARN peerDependencies The peer dependency karma-html2js-preprocessor@~0.1.0 included from karma will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. npm WARN peerDependencies The peer dependency karma-script-launcher@~0.1.0 included from karma will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. > [email protected] install /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma-phantomjs-launcher/node_modules/phantomjs > node install.js Download already available at /var/folders/rc/_0bgj5gd2d3_1_r87wq7x4fh0000gn/T/phantomjs/phantomjs-1.9.8-macosx.zip Extracting zip contents Removing /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom Copying extracted folder /var/folders/rc/_0bgj5gd2d3_1_r87wq7x4fh0000gn/T/phantomjs/phantomjs-1.9.8-macosx.zip-extract-1434734856569/phantomjs-1.9.8-macosx -> /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom Writing location.js file Done. Phantomjs binary available at /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom/bin/phantomjs npm WARN deprecated [email protected]: module has been merged into crc32-stream > [email protected] install /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma/node_modules/chokidar/node_modules/fsevents > node-gyp rebuild CXX(target) Release/obj.target/fse/fsevents.o In file included from ../fsevents.cc:6: ../node_modules/nan/nan.h:339:13: error: no member named 'New' in 'v8::String' return _NAN_ERROR(v8::Exception::Error, errmsg); ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR' # define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg)) ~~~~~~~~~~~~^ ../node_modules/nan/nan.h:343:5: error: no member named 'ThrowException' in namespace 'v8' _NAN_THROW_ERROR(v8::Exception::Error, errmsg); ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ・ ・ ・ ../node_modules/nan/nan.h:181:38: note: expanded from macro 'NanSymbol' #define NanSymbol(value) v8::String::NewSymbol(value) ~~~~~~~~~~~~^ /Users/akiyoko/.node-gyp/0.12.4/deps/v8/include/v8.h:1379:8: note: 'IsSymbol' declared here bool IsSymbol() const; ^ fatal error: too many errors emitted, stopping now [-ferror-limit=] 20 errors generated. make: *** [Release/obj.target/fse/fsevents.o] Error 1 gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/Users/akiyoko/.nodebrew/node/v0.12.4/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:269:23) gyp ERR! stack at ChildProcess.emit (events.js:110:17) gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:1074:12) gyp ERR! System Darwin 13.4.0 gyp ERR! command "node" "/Users/akiyoko/.nodebrew/node/v0.12.4/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" gyp ERR! cwd /Users/akiyoko/work/videojs-test/bower_components/videojs-contrib-hls/node_modules/karma/node_modules/chokidar/node_modules/fsevents gyp ERR! node -v v0.12.4 gyp ERR! node-gyp -v v1.0.3 gyp ERR! not ok
とエラーの嵐が。。
いろいろと調べてたどり着いたのが、こちら。
どうやら、Node.js のバージョンと karma のバージョンが合っていなかったのが、エラーの原因だとか。
そこで、nodebrew で Node.js のバージョンを v0.10系の最新版（StackOverflow で言及のあったバージョン）にしてやり直してみます。
$ nodebrew use v0.10.38 use v0.10.38 ・ ・ $ npm install
いろいろ WARN は出ましたが、ビルドは成功。
しかしながら、最後にブラウザのテストエラーがいっぱい出てしまいました。
そこで、
$ npm install --force
として、エラーが出ても無視することに。
その後、
$ grunt --force
とすると、dist 以下にファイルを生成することができました。
$ ls -al dist/ total 416 drwxr-xr-x 4 akiyoko staff 136 6 20 02:51 . drwxr-xr-x 23 akiyoko staff 782 6 20 02:51 .. -rw-r--r-- 1 akiyoko staff 155838 6 20 02:51 videojs.hls.js -rw-r--r-- 1 akiyoko staff 49694 6 20 02:51 videojs.hls.min.js
ここから、grunt-bower-task を使って、プロダクション用のファイルを出力していきます。
$ cd ~/work/videojs-test/ $ npm install grunt-bower-task --save-dev
参考
Gruntfile.js を以下のように作成します。
module.exports = function(grunt) { grunt.initConfig({ bower: { install: { options: { targetDir: './dist', //layout: 'byType', layout : function (type, component) { return type; }, install: true, verbose: false, cleanTargetDir: true, cleanBowerDir: false } } } }); grunt.loadNpmTasks('grunt-bower-task'); grunt.registerTask('default', ['bower:install']); };
参考
出力するファイルのディレクトリ構成を変更するために、bower.json に追記します。
ポイントとしては、videojs-contrib-hls と videojs-contrib-media-sources のライブラリには、"main" の書かれた bower.json が無かった（そもそも bower.json 自体が無かった）ので、"exportsOverride" で上書きしています。また、videojs の "exportsOverride" は、bower_components/videojs/bower.json のものをベースにしています。
{
"name": "videojs-test",
"version": "0.0.0",
"authors": [
"akiyoko blog <[email protected]>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"videojs": "~4.12.9",
"videojs-contrib-media-sources": "~1.0.0",
"videojs-contrib-hls": "~0.17.2"
},
"exportsOverride": {
"videojs": {
"js": [
"dist/video-js/video.js",
"dist/video-js/video-js.swf"
],
"css": "dist/video-js/video-js.min.css",
"css/font": [
"dist/video-js/font/vjs.eot",
"dist/video-js/font/vjs.svg",
"dist/video-js/font/vjs.ttf",
"dist/video-js/font/vjs.woff"
]
},
"videojs-contrib-hls": {
"js": "dist/videojs.hls.min.js"
},
"videojs-contrib-media-sources": {
"js": "src/videojs-media-sources.js"
}
}
}参考
gruntのbower installでtargetDirにcopyするファイルを制御 | TEJI TECH BLOG
grunt コマンドを実行することで、以下のようなフォルダ構成で、プロダクション用のファイルを出力することができました。
$ grunt
$ tree dist/
dist/
├── css
│ ├── font
│ │ ├── vjs.eot
│ │ ├── vjs.svg
│ │ ├── vjs.ttf
│ │ └── vjs.woff
│ └── video-js.min.css
└── js
├── video-js.swf
├── video.js
├── videojs-media-sources.js
└── videojs.hls.min.js
