Подтвердить что ты не робот

Каков "правильный" способ ссылаться на зависимости javascript, установленные через bower в файле проекта проекта yeoman?

Руководства по быстрому старту Yeoman и менеджеру пакетов предлагают использовать Bower для управления зависимостями.

Они устанавливаются в

app/bower_components/[component_name]

В руководстве просто предлагается вставить

<script src="app/bower_components/[component_name]/[relevant_file.js]"></script>

в ваш html файл.

Это хорошо. За исключением случаев, когда этот компонент имеет зависимости. Bower помогает получить эти компоненты, но, насколько я вижу, не дает вам их список и порядок, который должен быть вставлен в ваш код. (Я знаю, что вы получаете список того, что было установлено при установке, и где-то можно было выкопать его из json файла, но это все равно просто имя для узла для компонента, а не путь к фактическому файлу, который должен быть ссылки). Это означает, что для популярного компонента, такого как jquery-maonsonry, мне нужно вручную вставить

<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventies.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>

Все, что мне нужно было найти и найти соответствующее имя файла js. Учитывая, что все эти файлы уже определены в файлах зависимостей json, и bower знает о них, есть способ, которым вышеуказанный код можно автогенерировать. Либо для ввода вручную в html, либо в symLink, который указывает на вывод команды watch. Я знаю, что require.js может управлять этим от моего имени, но есть ли способ обойти требуемые требования?

4b9b3361

ОТВЕТЫ

Ответ 1

Я написал инструмент, который помогает с этим, grunt-bower-install. Это ворчливый плагин, который хорошо работает с рабочим процессом Yeoman. Вы вручную запускаете grunt bower-install после любого изменения компонентов вашей акустической системы. (После того, как вы установите новый, удалите его, что угодно).

Я попробовал это с помощью jquery-masonry...

$ bower install jquery-masonry --save
$ grunt bower-install

... и закончил с...

<!-- bower:js -->
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->

Причина, по которой этот подключаемый модуль не может быть более полезным, объясняется тем, что каждый пакет bower.json не указывает свойство main. Без этих знаний script (например, мой) не может надежно обнаружить фактический файл ядра пакета.

Эти инструменты все молоды. Учитывая свободный характер Бауэра, любой может зарегистрировать пакет. У автора есть выбор, не упоминающий зависимости, оставляя свойство main, выберите ненужные файлы, и мы получим немного хаоса. Bower предлагает рабочий процесс мечты для конечных пользователей, если авторы пакетов просто избегают этих шаблонов. Надеюсь, они начнут эту практику раньше, чем позже.

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

Итак, длинный рассказ, инструмент, подобный grunt-bower-install, может помочь, но, в конце концов, то, что вы сделали изначально, является самым безопасным подходом.

Просто обновление.

Yeoman generator-webapp теперь включает эту задачу Grunt, grunt-bower-install, из коробки. Таким образом, результат, описанный выше, устарел.

Новые результаты при использовании grunt-bower-install с jquery-masonry

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->

Ответ 2

Я только что добавил код на npm, который помещает ваши зависимости в упорядоченный массив. https://www.npmjs.org/package/dependency-orderer

Если вы не используете grunt bower-install или не хотите использовать теги script (если вы связываете свой javascript, каким вы должны быть), надеюсь, это сработает для вас.

Ужасно слышать отзывы, так как это первый модуль, который я опубликовал.