require
は Node.js 特有の関数です。ブラウザには用意されていません。
require
のようなモジュール機構を標準の仕様として策定する試みは進んでおり、import
文として形になっていますが、まだ各ブラウザでそのまま使える状態ではありません。
よって、モジュールとして提供されているコードをブラウザで使う方法も標準と言えるような物はなく、各々の好みや必要に応じてツールや作業手順を選ぶ事になります。
npm モジュールの Node.js での利用
Node.js では require
が使えますので、質問のコード(main.js
)はそのまま動きます。
npm
コマンドが使える環境でしたら node
もあると思いますので、以下のようにします。
node main.js
# 出力:
# { foo: { bar: 'foo' } }
# { foo: { bar: 'baz' } }
ブラウザでの利用
npm
で配布されているパッケージの中にはブラウザでは動かない物もありますので、そこは確認が必要です。
また、ブラウザで動かす際はプロジェクトページや README に方法の記述があれば、まずはそれに従うのが無難でしょう。
例えば以下のような方法があります。
<script>
で個別に読み込む
clone モジュールは単一のファイルなので、以下のようになります。
<script src="clone.js"></script>
<script src="main.js"></script>
clone.js
は下記のようにグローバル変数 clone
を先頭で宣言しています。
var clone = (function() {
ですから、main.js
ではこの変数を使えます。
require
している部分は削除します。
もちろん、clone.js
をしかるべき場所に配置しておく必要があります。
JavaScript のファイルを結合する
専用のツールなどもありますが、要するにファイルをつなげるだけです。
main.js
で require
している部分は削除し、main.js
の前に clone.js
の内容が来るように結合します。
cat ./node_modules/clone/clone.js main.js > all.js
そして、結合したファイルをブラウザから読み込みます。
<script src="all.js"></script>
これで実行されるスクリプトは、<script>
で個別に読み込んだ場合と一緒です。
これをわざわざ行なう目的は、リクエスト数を減らして性能を改善する事にあります。
HTTP/2 が普及すれば必要無くなる事かも知れません。
require
を理解するツールで結合する
上記の単純な方法だと、require
を削除した上で順番などにも配慮して結合しなければいけません。
そこで作られたのが、Browserify などのツールです。
require
を理解し、うまく動くように単純な結合以上の事をやってくれます。
require
が使えるという事は、ブラウザ用の JavaScript のコードを Node.js 用と同じに出来ますし、各ファイルの依存関係がコードに表現される、という点で便利です。
browserify main.js -o bundle.js
・出力されたbundle.jsを読み込んだら、望む結果を取得できました
・毎回このような処理が必要なのでしょうか?
そういう事になります。
このような毎回の作業を効率化する物として、Gulp などのビルドツールがあります。