読者です 読者をやめる 読者になる 読者になる

pirosikick's diary

君のハートにunshift

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/uidyeilds/fmtGithubから持ってきてくれてbundle.jsに出力してくれる。

css@importに書いているの引っ張ってきてくれて挿入してくれる。

// https://github.com/necolas/normalize.css/
@import 'necolas/normalize.css';

component.jsonpackage.jsonで管理されているリポジトリrequire("github-account/repository-name")だけでOKみたい。

Bowerはbower.jsmainを指定していても、: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度考えたい。