質問: 'foo'; // change a console.log(a); // show a console.log(b); ``` ブラウザで上記コードを実行したら、下記エラーとなりました。 > > `Uncaught ReferenceError: require is not defined` > > > ・上記コードを `main.js` として保存後、下記コマンドを実行した後、 ``` npm install clone npm install -g browserify browserify main.js -o bundle.js ``` ・出力されたbundle.jsを読み込んだら、望む結果を取得できました ・毎回このような処理が必要なのでしょうか?
回答: `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 に方法の記述があれば、まずはそれに従うのが無難でしょう。 例えば以下のような方法があります。 ### ` ``` `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 ``` そして、結合したファイルをブラウザから読み込みます。 ``` ``` これで実行されるスクリプトは、`