5340


webサイトの開発で、browserifyを使って複数の自作JSモジュールを一つにバンドルしています。  
それをHTMLのscriptタグで読み込むと意図する通りスクリプトが実行されます。

[code]

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

しかし、HTMLのインラインスクリプトから個々の自作JSモジュールを  
読み込む方法がわかりません。

[code]

    <script src="application.js"></script>
    <script>
      var mymodule = require("mymodule");
      new mymodule("<?php echo $hoge; ?>");
    </script>
    
[/code]

とすると、

[code]

    Uncaught ReferenceError: require is not defined
    
[/code]

とエラーがブラウザのコンソールに出力されます。

requirejsのときは、モジュールの定義はdefineを使い、  
HTMLのインラインスクリプトからは、requireを使ってモジュールを読み込んでいました。

[code]

    <script data-main="scripts/main" src="lib/require.js"></script>
    <script>
        require(['mymodule'], function(mymodule){
            new mymodule("<?php echo $hoge; ?>");
        });
    </script>
    
[/code]

browserifyではどのようにするのでしょうか？


CC BY-SA 3.0
2015-01-22T12:35:57.477
5086
2015-01-26T13:04:28.847
287
question
browserify requirejs
browserifyでまとめたモジュールをHTMLのインラインスクリプトから実行したい


私も以前同様の問題にぶつかった経験があります。  
サーバがページ表示のタイミングでしか生成できない変数があり、  
それをJavascript関数に渡す必要があったのですが、色々試して結局断念した経験があります。  
この部分さえ解決できればGulp+Browserifyが実用になりそうなのですが……


CC BY-SA 3.0
2015-01-23T01:19:03.620
5113
2015-01-23T01:19:03.620
7703
5086
answer


[`-r` オプション](https://github.com/substack/node-browserify#external-
requires)で外部にエクスポートしたいモジュールを指定します:

[code]

    $ cat mymodule.js
    module.exports = 'hi';
    
    $ browserify -r ./mymodule.js:mymodule > application.js
    $ cat application.js              # ↓ 指定したモジュール
    require=(function e(t,n,r){<...>{"mymodule":[function(require,module,exports){
        module.exports = 'hi';
    },{}]},{},[]);
    
[/code]

[code]

    <script src="application.js"></script>
    <script>
      var mymodule = require('mymodule');
    </script>
    
[/code]

指定しない場合は`require=`が出力されず、ブラウザ側から`require`グローバルが使えません:

[code]

    $ browserify ./mymodule.js > application.js
    $ cat application.js
    (function e(t,n,r){<...>
    
[/code]


CC BY-SA 3.0
2015-01-23T14:29:27.600
5161
2015-01-23T14:29:27.600
30
5086
answer


サンプルコードありがとうございます！

サンプルコードを改造して色々試してみました。  
結果、かなりトリッキーですが、browserifyの-rオプションを使わなくても  
requireができるようになりました。

  * mod/aaa.coffee
[code]     bbb   = require './bbb'

    
    module.exports =  class
        constructor: (@name) ->
            console.log 'aaa'
            new bbb();
    
[/code]

  * mod/bbb.coffee
[code]     module.exports = class

        constructor: (@name) ->
            console.log 'bbb'
    
[/code]

  * mod/brequire.coffee
[code]     # ↓全ての自作モジュールをreqruieする。

    require './aaa'
    require './bbb'
    
    module.exports = (mod) ->
    
        return require mod
    
[/code]

  * application.coffee
[code]     window.br = require 'mod/brequire'

    
[/code]

  * HTML
[code]     <script src="application.js"></script>

    <script>
        var aaa = br("./aaa");
        new aaa();
    </script>
    
[/code]

mod/brequire.coffeeの全ての自作モジュールをrequireするところは、  
モジュールを作る度に追加しなくてはいけないので、できれば書きたくないのですが、  
ブラウザで実行時にrequireの動的なロードはダメなようで、あらかじめrequireが必要でした。

ありがとうございます。


CC BY-SA 3.0
2015-01-26T13:04:28.847
5340
2015-01-26T13:04:28.847
287
5086
answer