Browserify: Utilizzare module.exports se necessario, in caso contrario esporre globale

Question

sto considerando l'adozione di browserify per alcuni dei miei progetti, ma vorrei fare in modo che gli altri non hanno di utilizzare browserify se vogliono utilizzare il (in bundle) codice. Il modo più ovvio per farlo è quello di esporre i moduli all'esportazione attraverso module.exports e attraverso uno window. globale. Tuttavia, preferisco non inquinare lo spazio dei nomi globale per coloro che sono require nello script.

È possibile rilevare se uno script è in fase di require d? Se lo è, allora avrei potuto fare qualcosa di simile:

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

Si noti che non importa cosa, questo sarà in bundle in anticipo, in modo che il var mymodule non sarà esponendo una globale. Inoltre, attualmente sto usando lo revealing module pattern, ma sarei disposto a passare a qualcosa di più appropriato per browserify.

Qual è il modo migliore per rendere un modulo sia require in grado e <script src= in grado? È meglio esporre un globale in entrambe le circostanze?

Answer 1

C'è un buon articolo da Forbes Lindesay che spiega come fare standalone build: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

La versione breve, utilizzare l'opzione stand-alone: ​​

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

Answer 2

Supponendo un'altra libreria non ha creato un module.exports globali oggetto, si può semplicemente verificare l'esistenza di module.exports

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

Answer 3

ho a che fare con lo stesso problema la costruzione di una biblioteca e di qui è un'opinione rought. Penso che abbiamo bisogno di separare prima le pubblico per una libreria in alcune categorie:

1. coloro che utilizzano browserify e NPM
2. coloro che basta scaricare un mylib.min.js e utilizzare un modo o un altro
3. AMD (con bower?), potrebbe essere la terza categoria.

Così, per è facile, si avrà un modulo tuoi index.js:

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

e la tua package.json avrà una principale

"principale": "index.js"

Avviso Non ho aggiunto alcun codice window.xx a index.js.

Per penso che l'idea migliore è quella di creare un standalone.js

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

Questo è ciò che browserify dovrebbe costruire.

Per (se ti interessa) puoi modificare autonomamente.js come segue:

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; 
} 

Answer 4

Perché non basta avvolgere l'intera cosa con una chiusura e passare exports come parametro?

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

In questo modo verrà esportato anche in ambito WebWorker e in altri ambienti "senza finestre".