Разница между Grunt, NPM и Bower (package.json против bower.json)


612

Я новичок в использовании npm и bower, создаю свое первое приложение в emberjs :).
У меня есть небольшой опыт работы с rails, поэтому я знаком с идеей файлов для перечисления зависимостей (таких как Bundler Gemfile)

Вопрос: когда я хочу добавить пакет (и проверить зависимость в git), где он принадлежит - в package.jsonили в bower.json?

Исходя из того, что я собираю,
запуск bower installизвлечет пакет и поместит его в /vendorкаталог, при
запуске npm installон извлечет его и поместит в /node_modulesкаталог.

Этот SO-ответ говорит, что bower предназначен для внешнего интерфейса, а npm - для внутреннего.
Ember-app-kit, похоже, придерживается этого различия с первого взгляда ... Но инструкции в gruntfile по включению некоторых функций дают две явные команды, поэтому я совершенно запутался здесь.

Интуитивно я бы догадался, что

  1. npm install --save-dev имя-пакета будет эквивалентно добавлению имени-пакета в мой package.json

  2. bower install --save package-name может совпадать с добавлением пакета в мой bower.json и запуском bower install ?

Если это так, то когда я должен когда-либо устанавливать такие пакеты явно, не добавляя их в файл, который управляет зависимостями (кроме установки инструментов командной строки глобально)?



14
@SindreSorhus Это не совсем дубликат. В этом посте также есть дополнительный вопрос. Кстати, вы не возражаете, объясняя понижающий голос?
sachinjain024

1
Вы изменили принятый ответ? Похоже, что высоко голосованный в 2014 году говорит о чем-то совершенно ином, чем принятый в 2016 году. Он также объясняет, почему он предлагает другой подход, так что я к этому хорош. Просто немного удивлен, что он принят (или повторно принят).

1
Да, я изменил принятый ответ, потому что чувствую, что последующий ответ гораздо более актуален. Я полагаю, что в этих передовых джунглях многие люди так же растеряны, как и я, поэтому этот вопрос приобрел популярность далеко за пределами моих ожиданий ... И все еще получает взгляды спустя 2 года. Благодаря Павлу, теперь есть более актуальный ответ, на который люди могут ссылаться (например, я использую веб-пакет на своей текущей работе).
apprenticeDev

Ответы:


154

Обновление на середину 2016 года :

Все меняется так быстро, что, если будет конец 2017 года, этот ответ может быть уже не актуален!

Начинающие могут быстро заблудиться в выборе инструментов для сборки и рабочих процессов, но самое актуальное в 2016 году - это вообще не использовать Bower, Grunt или Gulp! С помощью Webpack вы можете делать все прямо в NPM!

Не поймите меня неправильно, люди используют другие рабочие процессы, и я все еще использую GULP в своем унаследованном проекте (но постепенно покидаю его), но именно так это делается в лучших компаниях, и разработчики, работающие в этом рабочем процессе, зарабатывают МНОГО денег!

Посмотрите на этот шаблон, это очень современная установка, состоящая из смеси лучших и новейших технологий: https://github.com/coryhouse/react-slingshot

  • Webpack
  • NPM как инструмент для сборки (без Gulp, Grunt или Bower)
  • Реагируйте с Redux
  • ESLint
  • список длинный Иди и исследуй!

Ваши вопросы:

Когда я хочу добавить пакет (и проверить зависимость в git), где он находится - в package.json или в bower.json

  • Теперь все принадлежит package.json

  • Зависимости, необходимые для сборки, находятся в «devDependencies», т. npm install require-dir --save-devЕ. (--Save-dev обновляет ваш package.json, добавляя запись в devDependencies)

  • Зависимости, необходимые для вашего приложения во время выполнения, находятся в «зависимости», т. npm install lodash --saveЕ. (--Save обновляет ваш package.json, добавляя запись в зависимости)

Если это так, то когда я должен когда-либо устанавливать такие пакеты явно, не добавляя их в файл, который управляет зависимостями (кроме установки инструментов командной строки глобально)?

Всегда . Просто из-за комфорта. Когда вы добавляете флаг ( --save-devили --save), файл, который управляет deps (package.json), обновляется автоматически. Не тратьте время, редактируя в нем зависимости вручную. Ярлык для npm install --save-dev package-nameэто npm i -D package-nameи ярлык для npm install --save package-nameэтоnpm i -S package-name


6
Ваш ответ очень самоуверенный:> With help of Webpack you can do everything directly in NPM! Это неправда, в рабочем процессе даже не нужен веб-пакет
Августин Ридингер,

26
Этот ответ, кажется, делает много предположений. Вопрос состоит в том, чтобы задать разницу между npm и bower, и в этом ответе упоминается веб-пакет по некоторым причинам. Да, webpack - один из способов сделать это, но этот ответ заставляет его казаться, что это единственный и правильный способ сделать это. Например, если кто-то работает с Polymer 1.x, стандартный рабочий процесс будет использовать bower, а поддержка веб-пакетов не очень велика.
Джон Пауэрс

1
Ответ на самом деле актуален, но аргумент приводится не совсем: «но это так, как это делается» - ну, ничего не должно быть сделано только потому, что это должно быть сделано на первый взгляд (то есть сделано другими). Деньги не имеют ничего общего с обоснованием рабочего процесса.
Форсберг

3
Глядя на этот ответ в 2017 году. Переход к документации: «webpack v1 устарел. Мы призываем всех разработчиков перейти на webpack 2. Следуйте нашему руководству по миграции или обратитесь к документации webpack 2 для получения дополнительной информации». Ха-ха классическая веб-разработка.
user643011

1
@ user643011 Взглянув на руководство по миграции, вы заметите, что большая часть конфигурации остается прежней, а остальные - просто косметические изменения в структуре конфигурации. Я сделал миграцию за один день, включая PR
Павел

576

Npm и Bower являются инструментами управления зависимостями. Но основное различие между ними заключается в том, что npm используется для установки модулей Node js, а bower js используется для управления внешними компонентами, такими как html, css, js и т . Д.

Факт, который делает это более запутанным, состоит в том, что npm предоставляет некоторые пакеты, которые также могут быть использованы в разработке переднего плана, например, gruntи jshint.

Эти строки добавляют больше значения

Bower, в отличие от npm, может иметь несколько файлов (например, .js, .css, .html, .png, .ttf), которые считаются основными файлами. Бауэр семантически рассматривает эти основные файлы, когда они упакованы вместе, как компонент.

Редактировать : Grunt довольно сильно отличается от Npm и Bower. Grunt - это инструмент для запуска задач на JavaScript. Вы можете сделать много вещей, используя ворчание, которое вы должны были сделать вручную в противном случае. Выделение некоторых из применений Grunt:

  1. Архивирование некоторых файлов (например, плагин zipup)
  2. Linting на js файлах (jshint)
  3. Компилирование меньшего количества файлов (grunt-contrib-less)

Существуют плагины grunt для компиляции sass, расширения вашего javascript, копирования файлов / папок, минимизации javascript и т. Д.

Обратите внимание, что плагин grunt также является пакетом npm.

Вопрос 1

Когда я хочу добавить пакет (и проверить зависимость в git), где он находится - в package.json или в bower.json

Это действительно зависит от того, где этот пакет принадлежит. Если это модуль узла (например, grunt, request), то он перейдет в package.json, иначе в bower json.

Вопрос 2

Когда я должен когда-либо так явно устанавливать пакеты, не добавляя их в файл, который управляет зависимостями

Не имеет значения, устанавливаете ли вы пакеты явно или упоминаете зависимость в файле .json. Предположим, вы работаете над проектом узла и вам нужен другой проект, скажем request, тогда у вас есть два варианта:

  • Отредактируйте файл package.json и добавьте зависимость от 'request'
  • установка npm

ИЛИ

  • Используйте командную строку: npm install --save request

--saveoptions также добавляет зависимость в файл package.json. Если вы не укажете --saveопцию, она только загрузит пакет, но файл json не изменится.

Вы можете сделать это в любом случае, не будет существенной разницы.


3
Спасибо за разъяснения и за статью! Проницательный и проясняет разницу (которая должна помочь решить, где поставить зависимости). Я подожду, если кто-то ответит на последний вопрос (когда мне захочется установить пакеты по отдельности), и приму ваш ответ позже :)
apprenticeDev

1
Что касается npm, то это может быть менеджер пакетов для модулей NodeJS, но мы упускаем из виду, что он не эксклюзивен только для NodeJS. Npm также эффективно управляет зависимостями на стороне клиента. Пример: dontkry.com/posts/code/using-npm-on-the-client-side.html
Мэтт Смит,

15
Что может сделать бауэр, чего не может npm?
Адам Софер

1
Обратите внимание, что хранилище плагинов jQuery ( plugins.jquery.com ) было заменено на npm.
thdoan

2
последний учебник по быстрому старту angular 2 (RC) и git seed используются npmтолько в отличие от учебника v1, в котором использовались npm и bower. Я действительно, очень люблю факты, которые (а) package.json- это единственное, что нужно поддерживать, (б) то, что он рекурсивно вычисляет зависимости в одну строку npm install, и (в) когда есть проблема, вам просто нужно удалить node_modulesпапку и запустить npm install снова.
Себас
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.