JavaScriptの依存性管理ツールとして今後流行るかもしれない?webpackというソフトの導入方法を紹介します。

 

[前提]

・OSX

 

0. node.js のインストール

公式サイト(http://nodejs.org/)からダウンロードして、インストーラを起動します。

インストーラに従って次々と進んでいくだけで、簡単にインストール出来ます。

1. webpack のインストール

$ npm install webpack -g

以下のようなメッセージが出ればOKです。

/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js
webpack@1.4.0-beta2 /usr/local/lib/node_modules/webpack
├── memory-fs@0.1.0
├── clone@0.1.18
├── tapable@0.1.7
├── async@0.9.0
├── esprima@1.2.2
├── mkdirp@0.5.0 (minimist@0.0.8)
├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
├── enhanced-resolve@0.7.6 (graceful-fs@2.0.3)
├── webpack-core@0.4.8 (source-map@0.1.38)
├── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)
└── node-libs-browser@0.4.0 (https-browserify@0.0.0, tty-browserify@0.0.0, constants-browserify@0.0.1, path-browserify@0.0.0, process@0.7.0, os-browserify@0.1.2, string_decoder@0.10.31, domain-browser@1.1.2, punycode@1.3.1, assert@1.1.2, querystring-es3@0.2.1-0, events@1.0.2, timers-browserify@1.1.0, util@0.10.3, console-browserify@1.1.0, stream-browserify@1.0.0, url@0.10.1, vm-browserify@0.0.4, readable-stream@1.1.13, http-browserify@1.5.0, buffer@2.5.0, browserify-zlib@0.1.4, crypto-browserify@3.0.2)

以下のようなメッセージが出た場合は、権限が足りていないので、sudoを使うかsuでroot権限ユーザに変更した上で実行しましょう。

npm ERR! Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’
npm ERR!  { [Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’]
npm ERR!   errno: 3,
npm ERR!   code: ‘EACCES’,
npm ERR!   path: ‘/usr/local/lib/node_modules/webpack’,
npm ERR!   fstream_type: ‘Directory’,
npm ERR!   fstream_path: ‘/usr/local/lib/node_modules/webpack’,
npm ERR!   fstream_class: ‘DirWriter’,
npm ERR!   fstream_stack: 
npm ERR!    [ ‘/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23’,
npm ERR!      ‘/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53’,
npm ERR!      ‘Object.oncomplete (fs.js:107:15)’ ] }
npmERR! 
npm ERR! Please try running this command again as root/Administrator.
 
npm ERR! System Darwin 13.3.0
npm ERR! command “node” “/usr/local/bin/npm” “install” “webpack” “-g”
npm ERR! cwd /Users/XXX/Desktop
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.23
npm ERR! path /usr/local/lib/node_modules/webpack
npm ERR! fstream_path /usr/local/lib/node_modules/webpack
npm ERR! fstream_type Directory
npmERR!fstream_class DirWriter
npm ERR! code EACCES
npmERR!errno 3
npm ERR! stack Error: EACCES, mkdir ‘/usr/local/lib/node_modules/webpack’
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53
npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)
npmERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/XXX/Desktop/npm-debug.log
npm ERR! not ok code 0

インストールが完了したら、

$ webpack

と入力して実行してみましょう。

使い方のドキュメントの位置と、指定可能なオプションの一覧が表示されます。

これで導入は完了です。

Leave a Reply

Your email address will not be published. Required fields are marked *