[JavaScript] Duo でモジュール読み込みしてみる

4349 ワード
Duo JavaScript JavaScript テキストリンク

WEB+DB PRESS Vol.84 を読んでいて、Duo なるモジュール管理システムを知ったので試してみました。いままで Node.js(Express) のアプリケーションでは必然的に require() は使ってたんだけど、そろそろフロントエンドもやりたいなと思い。

Duo は GitHub 上にモジュールがあることを前提としていて、ソースに require('ほげ') と書いておけばビルド時に GitHub から引っ張ってきます。

Duo の導入

$ npm install -g duo

執筆時のバージョンは 0.9.1 です。

使ってみる

特に意味は無いのですが Moment.js を読み込んで利用してみます。次のように main.js を書いて、

main.js
var moment = require('moment/moment');

var message = moment().utc().add(9, 'h').format("ただいま MM月DD日 HH時mm分です。");
console.log(message);

ビルドします。

shell
$ duo main.js

すると次のようにファイルが展開されました。

build/main.js が、ビルド後のスクリプトです。このスクリプトは、先ほど書いたロジックと Moment.js が合わさったものです。

適当に index.html を作成して、ビルド後のスクリプトを読み込んでみます。

index.html
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script src="build/main.js" type="text/javascript"></script>
</body>
</html>

ブラウザで index.html を表示してみます。

動きました。

おわりに

次は Browserify と webpack を試してみようと思います