web-dev-qa-db-fra.com

Browserify: utilisez module.exports si nécessaire, sinon exposez global

J'envisage d'adopter browserify pour certains de mes projets, mais j'aimerais m'assurer que les autres n'ont pas à utiliser browserify s'ils souhaitent utiliser le code (fourni). La méthode la plus simple consiste à exposer les exportations de modules par le biais de module.exports ainsi que par le biais d'un window. global. Cependant, je préfère ne pas polluer l’espace de noms global pour ceux qui sont requireing le script.

Est-il possible de détecter si un script est en train d'être required? Si c'est le cas, je pourrais faire quelque chose comme:

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

Notez que quoi qu’il en soit, cela sera préalablement groupé, donc le var mymodule n’exposera pas un global. En outre, j'utilise actuellement le modèle module de révélation , mais je serais prêt à passer à quelque chose de plus approprié pour browserify.

Quelle est la meilleure façon de rendre un module à la fois requireable et <script src=able? Est-il préférable d'exposer simplement un global dans les deux circonstances?

javascriptbrowserify
36
Bryan Head

Forbes Lindesay a publié un bon article expliquant comment créer des versions autonomes: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

La version courte, utilisez l'option autonome:

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

Je suis confronté au même problème de construction d’une bibliothèque et c’est un avis éclairé. Je pense que nous devons d'abord séparer les audiences pour une bibliothèque dans quelques catégories:

  1. ceux qui utilisent browserify etNPM
  2. ceux qui vont simplement télécharger un fichier mylib.min.js et l’utiliser d’une manière ou d’une autre
  3. DMLA (avec bower?), Pourrait être la troisième catégorie.

Donc, pour 1 c'est facile, vous aurez votre module index.js: 

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

et votre package.json aura un principal

"main": "index.js"

Notez que je n'ai ajouté aucun code window.xx à index.js.

Pour 2 Je pense que la meilleure idée est de créer un standalone.js

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

C'est ce que browserify devrait construire.

Pour 3 (si vous vous en souciez), vous pouvez modifier standalone.js comme suit:

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

En supposant qu'une autre bibliothèque n'ait pas créé d'objet global module.exports, vous pouvez simplement vérifier l'existence de module.exports. 

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

Pourquoi ne pas simplement envelopper le tout avec une fermeture et passer exports en tant que paramètre?

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

De cette façon, il sera également exporté vers la portée WebWorker et d'autres environnements "sans fenêtre".

0
YemSalat