javascript - online - Browserify: use module.exports si es necesario; de lo contrario, exponga global

require javascript example

Question

Estoy considerando adoptar browserify para algunos de mis proyectos, pero me gustaría asegurarme de que otros no tengan que usar browserify si quieren usar el código (incluido). La forma obvia de hacerlo es tanto exponer las exportaciones de los módulos a través de module.exports como a través de una window. global. Sin embargo, prefiero no contaminar el espacio de nombres global para aquellos que require el script.

¿Es posible detectar si un script se está require ? Si es así, entonces podría hacer algo como:

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

Tenga en cuenta que no importa qué, esto se incluirá de antemano, por lo que var mymodule no expondrá un global. Además, actualmente estoy usando el patrón revelador del módulo , pero estaría dispuesto a cambiar a algo más apropiado para el navegador.

¿Cuál es la mejor manera de hacer que un módulo require y <script src= able? ¿Es mejor simplemente exponer un global en ambas circunstancias?

Answer 1

¿Por qué no simplemente envolver todo con un cierre y pasar las exports como un parámetro?

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

De esta forma, también lo exportará al ámbito de WebWorker y otros entornos sin ventanas.

Answer 2

Estoy lidiando con el mismo problema al construir una biblioteca y aquí hay una opinión corriente. Creo que tenemos que separar primero las audiencias de una biblioteca en algunas categorías:

1. aquellos que usan browserify y NPM
2. aquellos que simplemente descargarán mylib.min.js y usarán de una forma u otra
3. AMD (¿con bower?), Podría ser la tercera categoría.

Entonces, para 1 es fácil, tendrás un módulo index.js:

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

y su paquete.json tendrá una principal

"principal": "index.js"

Tenga en cuenta que no he agregado ningún código window.xx a index.js.

Para 2 , creo que la mejor idea es crear un standalone.js

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

Esto es lo que debe construir browserify.

Para 3 (si te importa) puedes ajustar standalone.js de la siguiente manera:

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 3

Hay un buen artículo de Forbes Lindesay explicando cómo hacer versiones independientes: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

La versión corta usa la opción independiente:

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

Answer 4

Suponiendo que otra biblioteca no haya creado un objeto global module.exports, simplemente puede verificar la existencia de module.exports

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