31406


ブラウザで[npmモジュール](https://www.npmjs.com/package/clone)を使用するには、どうすれば良いでしょうか。

・動作確認したいコード（`main.js`）

[code]

    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);
    
[/code]

ブラウザで上記コードを実行したら、下記エラーとなりました。

> `Uncaught ReferenceError: require is not defined`

・上記コードを `main.js` として保存後、下記コマンドを実行した後、

[code]

    npm install clone
    npm install -g browserify
    browserify main.js -o bundle.js
    
[/code]

・出力されたbundle.jsを読み込んだら、望む結果を取得できました  
・毎回このような処理が必要なのでしょうか？


CC BY-SA 3.0
2016-12-20T12:30:19.677
31268
2016-12-26T11:44:55.403
2016-12-26T09:06:32.227
3054
7886
question
javascript npm browserify
ブラウザで npmモジュールを使用したいが、require が使えない


`require` は Node.js 特有の関数です。ブラウザには用意されていません。

`require` のようなモジュール機構を標準の仕様として策定する試みは進んでおり、[`import`
文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)として形になっていますが、まだ各ブラウザでそのまま使える状態ではありません。  
よって、モジュールとして提供されているコードをブラウザで使う方法も標準と言えるような物はなく、各々の好みや必要に応じてツールや作業手順を選ぶ事になります。

## npm モジュールの Node.js での利用

Node.js では `require` が使えますので、質問のコード（`main.js`）はそのまま動きます。  
`npm` コマンドが使える環境でしたら `node` もあると思いますので、以下のようにします。

[code]

    node main.js
    # 出力:
    # { foo: { bar: 'foo' } }
    # { foo: { bar: 'baz' } }
    
[/code]

## ブラウザでの利用

`npm` で配布されているパッケージの中にはブラウザでは動かない物もありますので、そこは確認が必要です。  
また、ブラウザで動かす際はプロジェクトページや README に方法の記述があれば、まずはそれに従うのが無難でしょう。

例えば以下のような方法があります。

### `<script>` で個別に読み込む

clone モジュールは単一のファイルなので、以下のようになります。

[code]

    <script src="clone.js"></script>
    <script src="main.js"></script>
    
[/code]

[`clone.js`](https://github.com/pvorb/node-clone/blob/master/clone.js)
は下記のようにグローバル変数 `clone` を先頭で宣言しています。

[code]

    var clone = (function() {
    
[/code]

ですから、`main.js` ではこの変数を使えます。  
`require` している部分は削除します。  
もちろん、`clone.js` をしかるべき場所に配置しておく必要があります。

### JavaScript のファイルを結合する

専用のツールなどもありますが、要するにファイルをつなげるだけです。  
`main.js` で `require` している部分は削除し、`main.js` の前に `clone.js` の内容が来るように結合します。

[code]

    cat ./node_modules/clone/clone.js main.js > all.js
    
[/code]

そして、結合したファイルをブラウザから読み込みます。

[code]

    <script src="all.js"></script>
    
[/code]

これで実行されるスクリプトは、`<script>` で個別に読み込んだ場合と一緒です。  
これをわざわざ行なう目的は、リクエスト数を減らして性能を改善する事にあります。  
HTTP/2 が普及すれば必要無くなる事かも知れません。

### `require` を理解するツールで結合する

上記の単純な方法だと、`require` を削除した上で順番などにも配慮して結合しなければいけません。  
そこで作られたのが、Browserify などのツールです。  
`require` を理解し、うまく動くように単純な結合以上の事をやってくれます。  
`require` が使えるという事は、ブラウザ用の JavaScript のコードを Node.js
用と同じに出来ますし、各ファイルの依存関係がコードに表現される、という点で便利です。

>
[code]

>     browserify main.js -o bundle.js
[/code]

>
> ・出力されたbundle.jsを読み込んだら、望む結果を取得できました  
>  ・毎回このような処理が必要なのでしょうか？

そういう事になります。  
このような毎回の作業を効率化する物として、Gulp などのビルドツールがあります。


CC BY-SA 3.0
2016-12-26T09:00:04.337
31406
2016-12-26T11:44:55.403
2016-12-26T11:44:55.403
3054
3054
31268
answer