Требование jQuery и lodash с браузером

Мне нравится идея браузера, но у меня возникают проблемы с необходимостью использования «глобальных» переменных, таких как jQuery и lodash. я бы ожидал:

// application.js
var $ = require('jquery')
var _ = require('lodash')
var a = require('./path/to/module/a.js')

Чтобы сделать $ и _ доступными для модуля a. В конце концов, этот код компилируется, и сначала определяются $ и _. Однако у меня возникает проблема, и страница не загружается, говоря, что $ и _ не определены. Хорошо, я не понимаю, но, по крайней мере, я ожидал:

// a.js
var $ = require('jquery')
var _ = require('lodash')

var AClass = function() {
  console.log($, _)
}
module.exports = AClass

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

var $ = require('jquery')
var _ = require('lodash')
console.log($, _)

Что-то не так с моим приложением помимо этого, или я что-то принципиально не понимаю в браузере?


person cadlac    schedule 07.10.2014    source источник
comment
если вы хотите использовать jquery и lodash в a, вам нужно потребовать jquery и lodash в модуле a.   -  person zzzzBov    schedule 07.10.2014
comment
У меня такая же проблема, но мне требуется lo-dash в том же файле, и перед _.extend bla bla - lodash работает, но я не могу использовать lodash в функции... пример кода здесь - pastebin.com/YufmJiqF Вы решили проблему?   -  person Max P    schedule 27.04.2015
comment
хм, решить проблему. Просто переименуйте _ в 'lodash' и все работает нормально ;)   -  person Max P    schedule 27.04.2015


Ответы (2)


мы используем браузер (в нашем случае с gulp), и мы инициализируем глобальные переменные, например, используя объект окна. Таким образом, вы также можете использовать их в своей консоли, если вам нужно выполнить некоторые тесты.

window._ = require('lodash');

или, если вы используете ES6:

import _ from 'lodash';
window._ = _;

Надеюсь это поможет

person wezzy    schedule 05.06.2015

В современном JavaScript инструменты стараются избегать глобальных переменных. Если вы посмотрите на код в браузере, вы, вероятно, увидите что-то вроде этого:

(function() {
    var $ = require('jquery');
})();

Поскольку $ заключена в функцию, это больше не глобальная переменная.

Правильный способ исправить это — добавить требование в a. Это не очень дорого, поскольку require() всегда будет возвращать один и тот же (кэшированный) объект для каждого имени требования.

Другой вариант — вручную сделать локальную переменную глобальной с помощью

window.$ = $;

внутри вашего первого модуля. Но у этого есть несколько недостатков:

  • Он сломается, если кто-то изменит порядок модулей
  • Если кто-то определит другую глобальную переменную window.$, она может сломаться.

Вот почему лучше всего использовать require() в каждом модуле.

person Aaron Digulla    schedule 13.08.2019