browserify二つの別々の束は、第二のファイルから

Question

main.js 
level.js 
num3.js 
num4.js 

main.jsを変数を渡す

require('./level'); 
console.log(num3); 

level.js以下のように見えるが

var num3 = require('./num3'); 
var num4 = require('./num4'); 

以下

バンドルファイル

browserify --require ./level.js:level.js > bundle-level.js 
browserify --exclude level.js main.js > bundle-main.js 

のように見えます私はnum3を得ることができません//Uncaught ReferenceError: num3 is not defined必要な変数./num3num4、var num3 = require('./num3');をグローバル変数window.num3 = require('./num3');に変更すると値を取得できます。

変数num3とnum4を通過させる適切な方法はありますか？

Answer 1

まず、main.jsにrequireの問題があると思います。

main.jsた場合は、このrequireがあります

require('./level'); 

Browserifyがメインバンドルでlevel.jsを含むことになります。

browserify --require ./level.js:level.js > bundle-level.js 

モジュールのために使われている名前です。理由は、このコマンドで:を次の名前があることです。そして、このコマンドで：requireは間-バンドルrequireで実行時に解決されるため、

browserify --exclude level.js main.js > bundle-main.js 

あなたは、それがrequire('level.js')を見たとき、それが何をバンドルしないことをBrowserifyを語っています。

（通常のJavaScriptファイルは、あまりにも、.jsをオフのままその場合、と）あなたがrequireに非相対名を使用する必要があります。

browserify --require ./level.js:level > bundle-level.js 
browserify --exclude level main.js > bundle-main.js 

を次にmain.jsでrequireは次のようになります。

const level = require('level'); 

あなたはnum3とnum4をエクスポートする場合は、あなたがこのようなlevel.jsで行うことができます。

exports.num3 = require('./num3'); 
exports.num4 = require('./num4'); 

そしてmain.jsにあなたがして持っているでしょう：

const level = require('level'); 
console.log(level.num3); 
console.log(level.num4); 

をあなたは（Browserifyがエミュレート）ノードのモジュール解決メカニズムに興味があるなら、それはhereを説明しています。 --requireと--exclude Browserifyオプションは、基本的にそのメカニズムを無効にし、実行時にバンドル間で解決するようにBrowserifyに指示します。

したい場合にも、あなたは束の間に-ing requireのための複数のモジュールを指定することができます。

browserify \ 
    --require ./num3.js:num3 \ 
    --require ./num4.js:num4 \ 
    --require ./level.js:level > bundle-level.js 

browserify \ 
    --exclude num3 \ 
    --exclude num4 \ 
    --exclude level main.js > bundle-main.js 

そしてmain.js中を：

const level = require('level'); 
const num3 = require('num3'); 
const num4 = require('num4');