1

ブラウザでnpmモジュールを使用するには、どうすれば良いでしょうか。

・動作確認したいコード(main.js

var clone = require('clone');

var a, b;

a = { foo: { bar: 'baz' } };  // initial value of a 

b = clone(a);                 // clone a -> b 
a.foo.bar = '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を読み込んだら、望む結果を取得できました
・毎回このような処理が必要なのでしょうか?

2
  • 「var clone = require('clone')」したら表示されました
    – re9
    Commented 2016年12月25日 2:19
  • <script src="main.js"> と書いて ブラウザ実行しました。(ポート番号指定したくないため、)普通のブラウザで実行したいのですが…
    – re9
    Commented 2016年12月26日 1:10

1 件の回答 1

2

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.jsrequire している部分は削除し、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 などのビルドツールがあります。

1
  • 「npm で配布されているパッケージの中にはブラウザでは動かない物もありますので、そこは確認が必要です。また、ブラウザで動かす際はプロジェクトページや README に方法の記述があれば、まずはそれに従うのが無難でしょう」。なるほど、npm におけるブラウザとはそういう位置づけなのですね。大変参考になりました
    – re9
    Commented 2016年12月27日 2:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。