Как безболезненно подключать библиотеки на фронтенде?

Question

[darksladen]

Подскажите, как можно эффективно подключать библиотеки на фронте?

Раньше юзал bower, но сейчас вроде как его yarn вытеснил, даже на оф. странице написано, что bower лучше не использовать. (Кстати кто знает, объясните плиз почему его вытеснил yarn, а не npm, ведь они внешне ничем вроде не отличаются).

В bower я просто билдил js скрипты в основной файл вместе с моими скриптами, постоянно прописывая вручную путь к скриптам. Нельзя ли как нибудь автоматизировать этот процесс, чтобы я просто мог подключить jquery скажем и автоматом подтянулись бы скрипты со стилями и куда нибудь сбилдились..

Также просвятите, я явно что то недогоняю =) Как подключают библиотеки в yarn? Я так понимаю достаточно прописать require где то в вебпаке.. Но я юзаю гальп, как там быть? Просто подключенные библиотеки кидаются в папку node_modules, что ужасно неудобно.. Можно ли хоть как нибудь обычные зависимости кидать в отдельную папку, чтобы проще было их искать потом? Или как не запутаться с сотнями модулей ноды )

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

Comments

[Андрей Хохлов]

Погуглите webpack, совместное использование webpack и gulp и как работает npm/yarn.

Нагуглить кучу гайдов было бы даже быстрее, чем написать этот вопрос.

Answer 1

[kulaeff]

Bower помер. Используйте npm или yarn. Также крайне рекомендую освоить webpack. Он как раз и позволяет указать только единственный файл - точку входа, все остальное он подтянет автоматически и создаст два минифицированных файла - в одном скрипты, в другом стили. Само собой, можно настроить так, чтобы сторонние либы выносились в отдельный файл, а собственный код - в другой файл. Например, при использовании webpack, можно подключить jquery так:

import $ from 'jquery'

Можно сделать еще круче, чтобы не импортить jquery в каждом файле, можно заюзать вебпаковский плагин ProvidePlugin:

new webpack.ProvidePlugin({
  $: 'jquery',
})

После чего jquery будет доступен в любом js-файле.

Comments

[darksladen]

спасибо, а как вы думаете, на лендинге или небольшом сайте целесообразно вебпак использовать, вместо гальпа?

Про вынос скриптов вы меня наверно не поняли.. Я хочу пакеты библиотек для фронтенда устанавливать не в node_modules, а в другую папку, чтобы они отдельно были.. Как с bower получается, у него своя папка.. Что то ищу как так сделать и не вижу решения, не подскажите?

[kulaeff]

darksladen, вы можете указать папку, в которую хотите устанавливать библиотеки:

npm install --prefix ./install/here <package>

Вебпак стоит использовать независимо от размеров проекта. Нужно понимать, что вебпак - это сборщик, а галп - это таск-раннер. У этих двух вещей немного разное назначение, несмотря на то, что и тем и тем можно собрать скрипты и стили.

[darksladen]

Артём Петренков, спасибо за ответ! Я просто хотел не прописывать путь к библиотеке, а просто прописать require jquery и подключить ее.. Вообщем понял, webpack собирает js и это его работа. Выходит с гальпом без вебпка другого выхода нет?

А по поводу vendor.js все верно, я хочу чтобы он был, а также хотелось бы чтобы эти модули, которые подключаются в нем лежали у меня в проекте в отдельной папке, не в node_modules. Prefix - это путь для всех модулей. Нельзя фронтендные библиотеки(jquery,normilize и т.д) запихнуть в отдельную папку, как это получается при использовании бавера - он пихает вендоров к модули по умолчанию в каталог bower_components, где нет ничего лишнего.

В yarn было бы круто, чтобы dev зависимости скачивал сб в node_modules, а обычные в указанную(vendor/). Неужели нельзя их отделить?