web-dev-qa-db-ja.com

Browserify：必要に応じてmodule.exportsを使用し、それ以外の場合はグローバルを公開します

私のプロジェクトの一部に browserify を採用することを検討していますが、（バンドルされた）コードを使用する場合、他のユーザーがbrowserifyを使用する必要がないことを確認したいと思います。これを行う明白な方法は、module.exportsとwindow.グローバルの両方を通してモジュールのエクスポートを公開することです。ただし、スクリプトをrequireingしているユーザーのグローバル名前空間を汚染したくないです。

スクリプトがrequiredであるかどうかを検出することは可能ですか？もしそうなら、私は次のようなことができます：

var mymodule = (function() { ... })();
if (isRequired()) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}

これは事前にバンドルされるため、var mymoduleはグローバルを公開しません。また、現在、私は 公開モジュールパターン を使用していますが、browserifyにより適したものに切り替えたいと考えています。

モジュールをrequireableと<script src=ableの両方にする最良の方法は何ですか？両方の状況でグローバルを公開するのが最善ですか？

javascriptbrowserify
36
Bryan Head

スタンドアロンビルドの実行方法を説明するForbes Lindesayの優れた記事があります。 http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

ショートバージョンでは、スタンドアロンオプションを使用します。

browserify beep.js --standalone beep-boop > bundle.js
35
karellm

私はライブラリを構築するのと同じ問題に取り組んでいますが、これは大まかな意見です。いくつかのカテゴリのライブラリでは、最初にaudiencesを分離する必要があると思います。

  1. browserifyおよび[〜＃〜] npm [〜＃〜]を使用する人
  2. mylib.min.jsをダウンロードして何らかの方法で使用する人
  3. AMD（お辞儀あり？）は、3番目のカテゴリになります。

1の場合、簡単です。index.jsモジュールがあります。

module.exports = function () { /* code */ }

package.jsonにはメインがあります

「メイン」：「index.js」

Index.jsにwindow.xxコードを追加していないことに注意してください。

2の場合、最良のアイデアはstandalone.js

var mylib = require('./index.js');
global.window.mylib = mylib;

これはbrowserifyが構築すべきものです。

の場合（気になる場合）、standalone.jsを次のように調整できます。

var mylib = require('./index.js');
if (typeof global.window.define == 'function' && global.window.define.AMD) {
  global.window.define('mylib', function () { return mylib; });
} else {
  global.window.mylib = mylib;
}
20
José F. Romaniello

別のライブラリがグローバルmodule.exportsオブジェクトを作成していないと仮定すると、単純にmodule.exportsの存在を確認できます。

var mymodule = (function() { ... })();
if (module && module.exports) {
  module.exports = mymodule;
} else {
  window.mymodule = mymodule;
}
2
RomainMF

全体をクロージャーでラップし、exportsをパラメーターとして渡すだけではどうですか？

(function (exports) {
    // code here
    // ...
    exports.foo = bar;
})(exports || this);

これにより、WebWorkerスコープおよびその他の「ウィンドウレス」環境にもエクスポートされます。

0
YemSalat