Duo.jsちょっと使ってみた #duojs
Duo - A next-generation package manager for the front-end.
ちょっと良さ気だったので調べてみた。
準備
# install duo $ npm install -g duo
Github APIを使うらしく、duo用にAPI Tokenをここから生成し、
~/.netrc
に下記フォーマットで保存する。
# なんかGHEとかもできそうな感じがするけど調べてはいない machine api.github.com login <username> password <生成したGithubのapi token>
これで準備完了。
使う
var uid = require('matthewmueller/uid'); var fmt = require('yields/fmt'); var msg = fmt('Your unique ID is %s!', uid()); window.alert(msg);
上記サンプルコードをindex.js
で保存し、
$ duo index.js > bundle.js
と実行すると、matthewmueller/uid
とyeilds/fmt
をGithubから持ってきてくれてbundle.js
に出力してくれる。
cssも@import
に書いているの引っ張ってきてくれて挿入してくれる。
// https://github.com/necolas/normalize.css/ @import 'necolas/normalize.css';
component.json
かpackage.json
で管理されているリポジトリはrequire("github-account/repository-name")
だけでOKみたい。
Bowerはbower.js
でmain
を指定していても、:index.js
みたいに更にどのファイルを読み込むかを指定しないといけなかった。(BowerはcommonJS前提じゃないからだろうなーたぶん)
// https://github.com/mrdoob/three.js // bower.json有り、mainはbuild/three.min.js // three.jsはcommonJS対応されてる // ビルドはエラー無く終了するが、ブラウザでエラー var THREE = require('mrdoob/three.js@r68'); // Uncaught Error: cannot find module "mrdoob/three.js@r68" // どこにmainファイルが有るか指定してあげるとうまくいく var THREE = require('mrdoob/three.js@r68:build/three')
さらっと書いたけど、バージョンはrequire("hoge/hoge@バージョンタグ")
で指定。
ローカルのJS, HTML, JSONもrequireできる
// 同じディレクトリにあるlocal.jsもしくは、local/index.js var local = require('./local'); // HTMLはStringとして var template = require('./template.html'); // jsonはJavaScriptのオブジェクトとして var json = require('./data.json');
感想
- browserify勉強しなきゃ−と思ってたけど、Duoのほうがシンプルで良さそう
- バージョン指定、パス指定はどうなんだろうかと思った。
browserify、Webpack、componentをもうちょっと使ってみてもう1度考えたい。