Browserify: Используйте module.exports, если необходимо, иначе выставляйте глобальные

Я рассматриваю возможность использования browserify для некоторых моих проектов, но хочу убедиться, что другим не нужно использовать если они хотят использовать (в комплекте) код. Очевидный способ сделать это - разоблачить экспорт модулей через module.exports, а также через window. global. Однако я бы предпочел не загрязнять глобальное пространство имен для тех, кто require использует script.

Можно ли определить, является ли script require d? Если да, то я мог бы сделать что-то вроде:

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

Обратите внимание: что бы это ни было, это будет связано заранее, поэтому var mymodule не будет отображать глобальное. Кроме того, в настоящее время я использую раскрытие шаблона модуля, но хотел бы перейти на что-то более подходящее для браузера.

Какой лучший способ сделать модуль как require способен, так и <script src= способен? Лучше всего просто разоблачить глобальную ситуацию в обоих случаях?

Ответы

Ответ 1

Есть хорошая статья из Forbes Lindesay, объясняющая, как делать автономные сборки: http://www.forbeslindesay.co.uk/post/46324645400/standalone-browserify-builds

В короткой версии используйте автономный вариант:

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

Ответ 2

Я имею дело с одной и той же проблемой, создающей библиотеку, и здесь очень грубое мнение. Я думаю, нам нужно отделить сначала аудиторию для библиотеки в нескольких категориях:

те, кто использует браузер и NPM
те, кто будет просто загружать mylib.min.js и использовать так или иначе
AMD (с bower?), может быть третьей категорией.

Итак, для 1 это легко, у вас будет ваш модуль index.js:

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

и ваш пакет .json будет иметь основной

"main": "index.js"

Примечание. Я не добавляю код window.xx в index.js.

Для 2 Я думаю, что лучшая идея - создать standalone.js

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

Это то, что должен делать браузер.

Для 3 (если вам интересно) вы можете настроить 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;
}

Ответ 3

Предполагая, что в другой библиотеке не создан глобальный объект module.exports, вы можете просто проверить наличие module.exports

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

Ответ 4

Почему бы просто не обернуть всю вещь закрытием и передать exports в качестве параметра?

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

Таким образом, он также экспортирует его в область WebWorker и другие среды без окон.